Menu
A vertical navigation menu with nested options and icons. Supports unlimited nesting levels with proper indentation and visual hierarchy
Basic Usage
The menu accepts an array of options that define its structure. Each option can be a simple string or a complex object with various properties:
- Items with icons
- Items with badges
- Custom rendered items using Vue's
h
function - Group headers
- Dividers
Testing
2,000K
Group label level 1
Group 1 Item 1
Group 1 Item 2
Disabled State With Child
Testing
2,000K
Expand By Default
Closed state
Group label representing
Group 1 Item 1
Group 1 Item 2
Item 2 without group and children
Item without icon and children
Vue
html
<template>
<HLMenu :options="menuOptions" v-model:value="menuValue" :default-expanded-keys="['Dance Dance Dance']" />
</template>
<script setup lang="ts">
import { HLMenu } from '@platform-ui/highrise'
import { ref } from 'vue'
import { Home01Icon, BookOpen01Icon, ActivityIcon, AlertCircleIcon } from '@gohighlevel/ghl-icons/24/outline'
import { ref, h } from 'vue'
const menuOptions = [
{
label: () =>
h(
HLButton,
{
id: 'new-conversation',
size: '3xs',
color: 'blue',
variant: 'tertiary',
style: {
width: '100%',
},
},
{
iconLeft: PlaceholderIcon,
default: () => 'New Conversation',
}
),
key: 'button',
noPadding: true,
},
{
label: () => h(MenuItem),
key: 'go-back-home',
icon: renderIcon(Home01Icon),
},
{
type: 'group',
label: 'Group label level 1',
key: 'group-level-1',
children: [
{
label: 'Group 1 Item 1',
key: 'group-level-1-item-1',
icon: renderIcon(ActivityIcon),
},
{
label: 'Group 1 Item 2',
key: 'group-level-1-item-2',
icon: renderIcon(ActivityIcon),
},
],
},
{
key: 'divider-1',
type: 'divider',
},
{
label: 'Disabled State With Child',
key: 'pinball-1973',
icon: renderIcon(BookOpen01Icon),
disabled: true,
children: [
{
label: 'Rat',
key: 'rat',
},
],
},
{
label: () => h(MenuItem),
key: 'a-wild-sheep-chase',
disabled: true,
icon: renderIcon(BookOpen01Icon),
},
{
label: 'Expand By Default',
key: 'Dance Dance Dance',
icon: renderIcon(BookOpen01Icon),
children: [
{
label: 'Closed state',
key: 'beverage1',
icon: renderIcon(AlertCircleIcon),
children: [
{
label: 'Sandwich',
key: 'sandwich',
},
],
},
{
type: 'group',
label: 'Group label representing',
key: 'people',
children: [
{
label: 'Group 1 Item 1',
key: 'narrator',
icon: renderIcon(ActivityIcon),
},
{
label: 'Group 1 Item 2',
key: 'sheep-man',
icon: renderIcon(ActivityIcon),
},
],
},
{
label: 'Item 2 without group and children',
key: 'beverage2',
icon: renderIcon(AlertCircleIcon),
children: [
{
label: 'Item 1',
key: 'whisky',
},
],
},
{
label: 'Item without icon and children',
key: 'the-past-increases-the-future-recedes',
},
],
},
]
const menuValue = ref('group-level-1-item-1')
</script>
Imports
ts
import { HLMenu } from '@platform-ui/highrise'
Props
Name | Type | Default | Description |
---|---|---|---|
id * | string | undefined | undefined | The id of the element |
options | MenuOption[] | [] | Items data of menu. |
value | string | number | undefined | undefined | Selected Key of the menu item. |
defaultExpandedKeys | string[] | [] | The keys of the default expanded menu items. |
activeKey | string | null | null | The key of the active menu item. |
Types
MenuOption
ts
interface MenuOption {
label: string | (() => VNode) // Text or custom render function
key: string | number // Unique identifier
icon?: () => VNode // Optional icon
disabled?: boolean // Disable the menu item
children?: MenuOption[] // Nested menu items
type?: 'group' | 'divider' // Special item types
}
Emits
Name | Type | Description |
---|---|---|
update:value | (key: string, item: MenuOption) | Emitted when the value changes |
update:expanded-key | (keys: string[]) | Emitted when the expanded keys change |
Methods
Name | Type | Description |
---|---|---|
deriveResponsiveState | () => void | Recalculates the collapsed state of the responsive menu content. Use this method when the menu container's width changes dynamically to ensure proper expansion behavior in responsive mode. |
showOption | (key: string| number) => void | Show the option |