NavigationMenu ​
A link list that can be arranged in horizontal or vertical orientation.
Usage ​
Items ​
Use the items prop as an array of objects with the following properties:
label?: stringicon?: FunctionalComponent<HTMLAttributes & VNodeProps>avatar?: AvatarPropsbadge?: string | number | BadgePropstrailingIcon?: stringtype?: 'label' | 'link'value?: stringdisabled?: booleanclass?: anyslot?: stringonSelect?(e: Event): void
You can pass any property from the Link component such as to, target, etc.
Details
vue
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
import ConnectionIcon from '@bitrix24/b24icons-vue/actions/ConnectionIcon'
import MicrophoneOnIcon from '@bitrix24/b24icons-vue/main/MicrophoneOnIcon'
import CrmMapIcon from '@bitrix24/b24icons-vue/crm/CrmMapIcon'
import Settings5Icon from '@bitrix24/b24icons-vue/editor/Settings5Icon'
import Info1Icon from '@bitrix24/b24icons-vue/main/Info1Icon'
const items = [
{
label: 'Sales Pipeline',
icon: ConnectionIcon,
children: [
{
label: 'Lead Generation',
description: 'Initial contact with potential clients'
},
{
label: 'Lead Qualification',
description: 'Client potential assessment'
},
{
label: 'Negotiations',
description: 'Deal terms discussion',
icon: MicrophoneOnIcon
}
]
},
{
label: 'Sales Analytics',
badge: '+3',
active: true,
defaultOpen: true,
children: [
{
label: 'Sales Reports',
icon: CrmMapIcon,
active: true,
to: '/b24ui/components/components/navigation-menu.html',
badge: 1
},
{
label: 'Key Metrics',
icon: Settings5Icon,
to: '/b24ui/components/navigation-menu.html',
badge: {
label: 2,
color: 'ai' as const,
depth: 'dark' as const,
useFill: true
}
},
{
label: 'CRM Integration',
to: 'https://github.com/bitrix24/b24ui',
target: '_blank'
}
]
},
{
label: 'Resources',
to: 'https://github.com/bitrix24/b24ui',
target: '_blank'
},
{
label: 'Support',
icon: Info1Icon,
disabled: true,
to: 'https://helpdesk.bitrix24.com/',
target: '_blank'
}
] satisfies NavigationMenuItem[]
/**
* @memo The setTimeout construction is needed for normal initialization of the B24NavigationMenu component in demo mode
* In a real project, you will not dynamically load it
*/
const isInit = ref(false)
onMounted(() => {
setTimeout(() => {
isInit.value = true
}, 300)
})
</script>
<template>
<div v-if="isInit" class="min-w-[600px]">
<div class="relative z-[1] border-base-master/10 dark:border-base-100/20 border-y">
<B24NavigationMenu
:items="items"
class="w-full justify-start"
/>
</div>
<Placeholder class="h-52 w-full mt-2" />
</div>
</template>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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
INFO
You can also pass an array of arrays to the items prop to display groups of items.
TIP
Each item can take a children array of objects with the following properties to create submenus:
label: stringdescription?: stringicon?: FunctionalComponent<HTMLAttributes & VNodeProps>class?: anyonSelect?(e: Event): void
Orientation ​
Use the orientation prop to change the orientation of the NavigationMenu.
INFO
When orientation is vertical, a Collapsible component is used to display children. You can control the open state of each item using the open and defaultOpen properties.
INFO
Groups will be spaced when orientation is horizontal and separated when orientation is vertical.
INFO
For the last menu item, you should use the viewportRtl port for proper positioning.
Details
vue
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
import ConnectionIcon from '@bitrix24/b24icons-vue/actions/ConnectionIcon'
import MicrophoneOnIcon from '@bitrix24/b24icons-vue/main/MicrophoneOnIcon'
import CrmMapIcon from '@bitrix24/b24icons-vue/crm/CrmMapIcon'
import Settings5Icon from '@bitrix24/b24icons-vue/editor/Settings5Icon'
import Info1Icon from '@bitrix24/b24icons-vue/main/Info1Icon'
export interface ExampleProps {
orientation?: any
}
withDefaults(defineProps<ExampleProps>(), {
orientation: 'horizontal' as const
})
const items = [
[
{
label: 'Sales Manager',
type: 'label' as const
},
{
label: 'Sales Pipeline',
icon: ConnectionIcon,
children: [
{
label: 'Lead Generation',
description: 'Initial contact with potential clients'
},
{
label: 'Lead Qualification',
description: 'Client potential assessment'
},
{
label: 'Negotiations',
description: 'Deal terms discussion',
icon: MicrophoneOnIcon
}
]
},
{
label: 'Support',
icon: Info1Icon,
disabled: true,
to: 'https://helpdesk.bitrix24.com/',
target: '_blank'
}
],
[
{
viewportRtl: true,
label: 'Sales Analytics',
badge: '+3',
active: true,
defaultOpen: true,
children: [
{
label: 'Sales Reports',
icon: CrmMapIcon,
active: true,
to: '/b24ui/components/components/navigation-menu.html',
badge: 1
},
{
label: 'Key Metrics',
icon: Settings5Icon,
to: '/b24ui/components/navigation-menu.html',
badge: {
label: 2,
color: 'ai' as const,
depth: 'dark' as const,
useFill: true
}
},
{
label: 'CRM Integration',
to: 'https://github.com/bitrix24/b24ui',
target: '_blank'
}
]
}
]
] satisfies NavigationMenuItem[][]
/**
* @memo The setTimeout construction is needed for normal initialization of the B24NavigationMenu component in demo mode
* In a real project, you will not dynamically load it
*/
const isInit = ref(false)
onMounted(() => {
setTimeout(() => {
isInit.value = true
}, 300)
})
</script>
<template>
<div v-if="isInit" class="min-w-[600px] min-h-72">
<div
class="border-base-master/10 dark:border-base-100/20"
:class="[
orientation === 'horizontal'
? 'border-y relative z-[1]'
: 'border py-2 rounded w-[240px] data-[collapsed=true]:w-[69px]'
]"
>
<B24NavigationMenu
:items="items"
:orientation="orientation"
class="w-full"
/>
</div>
</div>
</template>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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
Highlight ​
Use the highlight prop to display a highlighted border for the active item.
Use the highlight-color prop to change the color of the border. It defaults to the color prop.
INFO
In this example, the border-b class is applied to display a border in horizontal orientation, this is not done by default to let you have a clean slate to work with.
DANGER
In vertical orientation, the highlight prop only highlights the border of active children.
Details
vue
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
import CrmMapIcon from '@bitrix24/b24icons-vue/crm/CrmMapIcon'
import Settings5Icon from '@bitrix24/b24icons-vue/editor/Settings5Icon'
import Info1Icon from '@bitrix24/b24icons-vue/main/Info1Icon'
export interface ExampleProps {
isHighlight?: boolean
highlightColor?: any
orientation?: any
}
withDefaults(defineProps<ExampleProps>(), {
isHighlight: true,
highlightColor: 'success' as const,
orientation: 'horizontal' as const
})
const items = [
{
label: 'Sales Analytics',
badge: '+3',
active: true,
defaultOpen: true,
children: [
{
label: 'Sales Reports',
icon: CrmMapIcon,
active: true,
to: '/b24ui/components/components/navigation-menu.html',
badge: 1
},
{
label: 'Key Metrics',
icon: Settings5Icon,
to: '/b24ui/components/navigation-menu.html',
badge: {
label: 2,
color: 'ai' as const,
depth: 'dark' as const,
useFill: true
}
},
{
label: 'CRM Integration',
to: 'https://github.com/bitrix24/b24ui',
target: '_blank'
}
]
},
{
label: 'Resources',
to: 'https://github.com/bitrix24/b24ui',
target: '_blank'
},
{
label: 'Support',
icon: Info1Icon,
disabled: true,
to: 'https://helpdesk.bitrix24.com/',
target: '_blank'
}
] satisfies NavigationMenuItem[]
/**
* @memo The setTimeout construction is needed for normal initialization of the B24NavigationMenu component in demo mode
* In a real project, you will not dynamically load it
*/
const isInit = ref(false)
onMounted(() => {
setTimeout(() => {
isInit.value = true
}, 300)
})
</script>
<template>
<div v-if="isInit" class="min-w-[600px] min-h-72">
<div
class="border-base-master/10 dark:border-base-100/20"
:class="[
orientation === 'horizontal'
? 'border-y relative z-[1]'
: 'border py-2 rounded w-[240px] data-[collapsed=true]:w-[69px]'
]"
>
<B24NavigationMenu
:highlight="isHighlight"
:highlight-color="highlightColor"
:items="items"
:orientation="orientation"
class="w-full"
/>
</div>
</div>
</template>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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
Color ​
Use the color prop to change the color of the NavigationMenu.
Details
vue
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
import CrmMapIcon from '@bitrix24/b24icons-vue/crm/CrmMapIcon'
import Settings5Icon from '@bitrix24/b24icons-vue/editor/Settings5Icon'
import Info1Icon from '@bitrix24/b24icons-vue/main/Info1Icon'
export interface ExampleProps {
color?: any
}
withDefaults(defineProps<ExampleProps>(), {
color: 'success' as const
})
const items = [
{
label: 'Sales Analytics',
badge: '+3',
active: true,
defaultOpen: true,
children: [
{
label: 'Sales Reports',
icon: CrmMapIcon,
active: true,
to: '/b24ui/components/components/navigation-menu.html',
badge: 1
},
{
label: 'Key Metrics',
icon: Settings5Icon,
to: '/b24ui/components/navigation-menu.html',
badge: {
label: 2,
color: 'ai' as const,
depth: 'dark' as const,
useFill: true
}
},
{
label: 'CRM Integration',
to: 'https://github.com/bitrix24/b24ui',
target: '_blank'
}
]
},
{
label: 'Resources',
to: 'https://github.com/bitrix24/b24ui',
target: '_blank'
},
{
label: 'Support',
icon: Info1Icon,
disabled: true,
to: 'https://helpdesk.bitrix24.com/',
target: '_blank'
}
] satisfies NavigationMenuItem[]
/**
* @memo The setTimeout construction is needed for normal initialization of the B24NavigationMenu component in demo mode
* In a real project, you will not dynamically load it
*/
const isInit = ref(false)
onMounted(() => {
setTimeout(() => {
isInit.value = true
}, 300)
})
</script>
<template>
<div v-if="isInit" class="min-w-[600px] min-h-72">
<div class="border-base-master/10 dark:border-base-100/20 border-y relative z-[1]">
<B24NavigationMenu
:color="color"
:items="items"
class="w-full"
/>
</div>
<Placeholder class="h-52 w-full mt-2" />
</div>
</template>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
81
82
83
84
85
86
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
81
82
83
84
85
86
Variant ​
Use the variant parameter to change the variant of the NavigationMenu.
Details
vue
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
import ConnectionIcon from '@bitrix24/b24icons-vue/actions/ConnectionIcon'
import MicrophoneOnIcon from '@bitrix24/b24icons-vue/main/MicrophoneOnIcon'
import CrmMapIcon from '@bitrix24/b24icons-vue/crm/CrmMapIcon'
import Settings5Icon from '@bitrix24/b24icons-vue/editor/Settings5Icon'
import Info1Icon from '@bitrix24/b24icons-vue/main/Info1Icon'
export interface ExampleProps {
isHighlight?: boolean
color?: any
orientation?: any
variant?: any
}
withDefaults(defineProps<ExampleProps>(), {
isHighlight: true,
color: 'success' as const,
orientation: 'horizontal' as const,
variant: 'link' as const
})
const items = [
{
label: 'Sales Pipeline',
icon: ConnectionIcon,
children: [
{
label: 'Lead Generation',
description: 'Initial contact with potential clients'
},
{
label: 'Lead Qualification',
description: 'Client potential assessment'
},
{
label: 'Negotiations',
description: 'Deal terms discussion',
icon: MicrophoneOnIcon
}
]
},
{
label: 'Sales Analytics',
badge: '+3',
active: true,
defaultOpen: true,
children: [
{
label: 'Sales Reports',
icon: CrmMapIcon,
active: true,
to: '/b24ui/components/components/navigation-menu.html',
badge: 1
},
{
label: 'Key Metrics',
icon: Settings5Icon,
to: '/b24ui/components/navigation-menu.html',
badge: {
label: 2,
color: 'ai' as const,
depth: 'dark' as const,
useFill: true
}
},
{
label: 'CRM Integration',
to: 'https://github.com/bitrix24/b24ui',
target: '_blank'
}
]
},
{
label: 'Resources',
to: 'https://github.com/bitrix24/b24ui',
target: '_blank'
},
{
label: 'Support',
icon: Info1Icon,
disabled: true,
to: 'https://helpdesk.bitrix24.com/',
target: '_blank'
}
] satisfies NavigationMenuItem[]
/**
* @memo The setTimeout construction is needed for normal initialization of the B24NavigationMenu component in demo mode
* In a real project, you will not dynamically load it
*/
const isInit = ref(false)
onMounted(() => {
setTimeout(() => {
isInit.value = true
}, 300)
})
</script>
<template>
<div v-if="isInit" class="min-w-[600px] min-h-72">
<div
class="border-base-master/10 dark:border-base-100/20"
:class="[
orientation === 'horizontal'
? 'border-y relative z-[1]'
: 'border py-2 rounded w-[240px] data-[collapsed=true]:w-[69px]'
]"
>
<B24NavigationMenu
:variant="variant"
:highlight="isHighlight"
:color="color"
:items="items"
:orientation="orientation"
class="w-full"
/>
</div>
</div>
</template>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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
Trailing Icon ​
Use the trailing-icon prop to customize the trailing @bitrix24/b24icons of each item. Defaults to chevron-down. This icon is only displayed when an item has children.
TIP
You can also set an icon for a specific item by using the trailingIcon property in the item object.
Details
vue
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
import ConnectionIcon from '@bitrix24/b24icons-vue/actions/ConnectionIcon'
import MicrophoneOnIcon from '@bitrix24/b24icons-vue/main/MicrophoneOnIcon'
import CrmMapIcon from '@bitrix24/b24icons-vue/crm/CrmMapIcon'
import Settings5Icon from '@bitrix24/b24icons-vue/editor/Settings5Icon'
import Info1Icon from '@bitrix24/b24icons-vue/main/Info1Icon'
import ArrowDownIcon from '@bitrix24/b24icons-vue/actions/ArrowDownIcon'
const items = [
{
label: 'Sales Pipeline',
icon: ConnectionIcon,
children: [
{
label: 'Lead Generation',
description: 'Initial contact with potential clients'
},
{
label: 'Lead Qualification',
description: 'Client potential assessment'
},
{
label: 'Negotiations',
description: 'Deal terms discussion',
icon: MicrophoneOnIcon
}
]
},
{
label: 'Sales Analytics',
badge: '+3',
children: [
{
label: 'Sales Reports',
icon: CrmMapIcon,
active: true,
to: '/b24ui/components/components/navigation-menu.html'
},
{
label: 'Key Metrics',
icon: Settings5Icon,
to: '/b24ui/components/navigation-menu.html'
},
{
label: 'CRM Integration',
to: 'https://github.com/bitrix24/b24ui',
target: '_blank'
}
]
},
{
label: 'Resources',
to: 'https://github.com/bitrix24/b24ui',
target: '_blank'
},
{
label: 'Support',
icon: Info1Icon,
disabled: true,
to: 'https://helpdesk.bitrix24.com/',
target: '_blank'
}
] satisfies NavigationMenuItem[]
/**
* @memo The setTimeout construction is needed for normal initialization of the B24NavigationMenu component in demo mode
* In a real project, you will not dynamically load it
*/
const isInit = ref(false)
onMounted(() => {
setTimeout(() => {
isInit.value = true
}, 300)
})
</script>
<template>
<div v-if="isInit" class="min-w-[600px]">
<div class="relative z-[1] border-base-master/10 dark:border-base-100/20 border-y">
<B24NavigationMenu
:trailing-icon="ArrowDownIcon"
:items="items"
class="w-full justify-start"
/>
</div>
<Placeholder class="h-52 w-full mt-2" />
</div>
</template>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
81
82
83
84
85
86
87
88
89
90
91
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
81
82
83
84
85
86
87
88
89
90
91
Unmount ​
Use the unmount-on-hide prop to control the content unmounting behavior. Defaults to true.
INFO
You can inspect the DOM to see each item's content being rendered.
Details
vue
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
import ConnectionIcon from '@bitrix24/b24icons-vue/actions/ConnectionIcon'
import MicrophoneOnIcon from '@bitrix24/b24icons-vue/main/MicrophoneOnIcon'
import CrmMapIcon from '@bitrix24/b24icons-vue/crm/CrmMapIcon'
import Settings5Icon from '@bitrix24/b24icons-vue/editor/Settings5Icon'
export interface ExampleProps {
isUnmountOnHide?: any
}
withDefaults(defineProps<ExampleProps>(), {
isUnmountOnHide: true
})
const items = [
{
label: 'Sales Pipeline',
icon: ConnectionIcon,
children: [
{
label: 'Lead Generation',
description: 'Initial contact with potential clients'
},
{
label: 'Lead Qualification',
description: 'Client potential assessment'
},
{
label: 'Negotiations',
description: 'Deal terms discussion',
icon: MicrophoneOnIcon
}
]
},
{
label: 'Sales Analytics',
badge: '+3',
active: true,
defaultOpen: true,
children: [
{
label: 'Sales Reports',
icon: CrmMapIcon,
active: true,
to: '/b24ui/components/components/navigation-menu.html',
badge: 1
},
{
label: 'Key Metrics',
icon: Settings5Icon,
to: '/b24ui/components/navigation-menu.html',
badge: {
label: 2,
color: 'ai' as const,
depth: 'dark' as const,
useFill: true
}
},
{
label: 'CRM Integration',
to: 'https://github.com/bitrix24/b24ui',
target: '_blank'
}
]
}
] satisfies NavigationMenuItem[]
/**
* @memo The setTimeout construction is needed for normal initialization of the B24NavigationMenu component in demo mode
* In a real project, you will not dynamically load it
*/
const isInit = ref(false)
onMounted(() => {
setTimeout(() => {
isInit.value = true
}, 300)
})
</script>
<template>
<div v-if="isInit" class="min-w-[600px] min-h-72">
<div class="border-base-master/10 dark:border-base-100/20 border-y relative z-[1]">
<B24NavigationMenu
:unmount-on-hide="isUnmountOnHide"
:items="items"
class="w-full"
/>
</div>
<Placeholder class="h-52 w-full mt-2" />
</div>
</template>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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
Examples ​
With custom slot ​
Use the slot property to customize a specific item.
You will have access to the following slots:
#{{ item.slot }}
#{{ item.slot }}-leading
#{{ item.slot }}-label
#{{ item.slot }}-trailing
#{{ item.slot }}-contentDetails
vue
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
import ConnectionIcon from '@bitrix24/b24icons-vue/actions/ConnectionIcon'
import Info1Icon from '@bitrix24/b24icons-vue/main/Info1Icon'
const items = [
{
label: 'Sales Pipeline',
icon: ConnectionIcon
},
{
label: 'Sales Analytics',
badge: '+3'
},
{
label: 'Resources'
},
{
label: 'Support',
icon: Info1Icon,
slot: 'support'
}
] satisfies NavigationMenuItem[]
/**
* @memo The setTimeout construction is needed for normal initialization of the B24NavigationMenu component in demo mode
* In a real project, you will not dynamically load it
*/
const isInit = ref(false)
onMounted(() => {
setTimeout(() => {
isInit.value = true
}, 300)
})
</script>
<template>
<div v-if="isInit" class="min-w-[600px]">
<div class="relative z-[1] border-base-master/10 dark:border-base-100/20 border-y">
<B24NavigationMenu
:items="items"
class="w-full justify-start"
>
<template #support-trailing>
<B24Badge label="44" depth="dark" size="sm" />
</template>
</B24NavigationMenu>
</div>
<Placeholder class="h-52 w-full mt-2" />
</div>
</template>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
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
TIP
You can also use the #item, #item-leading, #item-label, #item-trailing and #item-content slots to customize all items.
API ​
Props ​
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
trailingIcon | icons.chevronDown | (props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): anyThe icon displayed to open the menu. |
externalIcon | true | boolean | IconComponentThe icon displayed when the item is an external link.
Set to `false` to hide the external icon. |
items | NavigationMenuItem[] | NavigationMenuItem[][] | |
color | 'primary' | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" |
variant | 'pill' | "link" | "pill" |
orientation | "horizontal" | "vertical" | "horizontal"The orientation of the menu. |
collapsed | false | booleanCollapse the navigation menu to only show icons.
Only works when `orientation` is `vertical`. |
highlight | booleanDisplay a line next to the active item. | |
highlightColor | 'primary' | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" |
content | Omit<NavigationMenuContentProps, "as" | "asChild" | "forceMount"> & Partial<EmitsToProps<DismissableLayerEmits>>The content of the menu. | |
contentOrientation | "vertical" | "vertical" | "horizontal"The orientation of the content.
Only works when `orientation` is `horizontal`. |
arrow | false | booleanDisplay an arrow alongside the menu. |
labelKey | "label" | string | numberThe key used to get the label from the item. |
b24ui | { root?: ClassNameValue; list?: ClassNameValue; label?: ClassNameValue; item?: ClassNameValue; link?: ClassNameValue; ... 23 more ...; arrow?: ClassNameValue; } | |
modelValue | stringThe controlled value of the menu item to activate. Can be used as `v-model`. | |
defaultValue | stringThe value of the menu item that should be active when initially rendered.
Use when you do not need to control the value state. | |
unmountOnHide | true | booleanWhen `true`, the element will be unmounted on closed state. |
delayDuration | 0 | numberThe duration from when the pointer enters the trigger until the tooltip gets opened. |
disableClickTrigger | false | booleanIf `true`, menu cannot be open by click on trigger |
disableHoverTrigger | false | booleanIf `true`, menu cannot be open by hover on trigger |
skipDelayDuration | 300 | numberHow much time a user has to enter another trigger without incurring a delay again. |
disablePointerLeaveClose | false | booleanIf `true`, menu will not close during pointer leave event |
Slots ​
| Slot | Type |
|---|---|
item | { item: NavigationMenuItem; index: number; active?: boolean; } |
item-leading | { item: NavigationMenuItem; index: number; active?: boolean; } |
item-label | { item: NavigationMenuItem; index: number; active?: boolean; } |
item-trailing | { item: NavigationMenuItem; index: number; active?: boolean; } |
item-content | { item: NavigationMenuItem; index: number; active?: boolean; } |
Emits ​
| Event | Type |
|---|