AisNavBar
A wrapper component that positions one or more AisNav components in a navigation bar. This component is used in the AisHeader component.
Example Usages
Using Default Slot
vue
<template>
<AisNavBar>
<AisNav class="gap-2 px-2 items-center"
item-class="items-center gap-2 p-3 text-secondary hover"
>
<AisNavItem label="Home" href="/" :icon="faHome" />
<AisNavItem label="Search" href="/search" icon="search" />
<AisNavItem>
<AisMenu label="Team" icon="group">
<AisMenuItem label="John Smith"></AisMenuItem>
<AisMenuItem label="Michael Jackson"></AisMenuItem>
<AisMenuItem label="Clark Thomas"></AisMenuItem>
<AisMenuItem label="David Drew"></AisMenuItem>
<AisMenuItem label="Frank Jones"></AisMenuItem>
<AisMenuItem label="Baily Freeman"></AisMenuItem>
<AisMenuItem label="Bo Jackson"></AisMenuItem>
<AisMenuItem>
<AisMenu label="DB Team" :icon="faDatabase" dropright>
<AisMenuItem label="Eric Hudson" icon="user"></AisMenuItem>
<AisMenuItem label="Jeff Barnes" icon="user"></AisMenuItem>
<AisMenuItem label="Dave Schau" icon="user"></AisMenuItem>
<AisMenuItem>
<AisMenu label="Other" icon="unknown">
<AisMenuItem label="Other 1"></AisMenuItem>
<AisMenuItem label="Other 2"></AisMenuItem>
<AisMenuItem label="Other 3" icon="user"></AisMenuItem>
</AisMenu>
</AisMenuItem>
</AisMenu>
</AisMenuItem>
<AisMenuItem>
<AisMenu label="Students" :icon="faUserGraduate" dropright>
<AisMenuItem label="Joshua Burbidge" :icon="faUserGraduate"></AisMenuItem>
<AisMenuItem label="Student 2"></AisMenuItem>
<AisMenuItem label="Student 3" icon="user"></AisMenuItem>
<AisMenuItem>
<AisMenu label="Other" icon="unknown">
<AisMenuItem label="Other 1"></AisMenuItem>
<AisMenuItem label="Other 2"></AisMenuItem>
<AisMenuItem label="Other 3" icon="user"></AisMenuItem>
</AisMenu>
</AisMenuItem>
</AisMenu>
</AisMenuItem>
</AisMenu>
</AisNavItem>
<AisNavItem label="Support" href="/support" :icon="faHeartbeat"/>
<AisNavItem label="Help" icon="unknown" @click="handleHelpClick" />
</AisNav>
<!-- Secondary Nav (on the right) -->
<template #secondaryNav>
<AisNav class="px-1 gap-2 xl:gap-4"
item-class="py-3 px-1 space-x-2 text-secondary hover:no-underline"
>
<AisNavItem label="Support" href="/support" :icon="faHeartbeat"/>
<AisNavItem label="Help" href="/help" icon="unknown" />
</AisNav>
</template>
</AisNavBar>
</template>
<script setup>
import { AisNavBar } from '@ais-public/ais-components';
import { AisNav } from '@ais-public/ais-components';
import { AisNavItem } from '@ais-public/ais-components';
import { AisMenu } from '@ais-public/ais-components';
import { AisMenuItem } from '@ais-public/ais-components';
import { faHome, faHeartbeat, faUserGraduate, faDatabase } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';
library.add( faHome, faHeartbeat, faUserGraduate, faDatabase )
const handleHelpClick = (e) => { console.log(`navbarExample.help.click: ${e}`) }
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
Using Items Prop
vue
<template>
<AisNavBar nav-class="gap-2 px-2 items-center"
item-class="p-3 gap-2 text-secondary items-center hover"
:nav-items="mainNav"
:secondary-nav-items="secondaryNav"
></AisNavBar>
</template>
<script setup>
import { AisNavBar } from '@ais-public/ais-components';
import { mainNav, secondaryNav } from "@/components/nav/examples/nav-examples";
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13