Skip to content

Accessibility: Partial

Translations: Not Needed

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
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

NameTypeDefaultDescription
id *string | undefinedundefinedThe id of the element
optionsMenuOption[][]Items data of menu.
valuestring | number | undefinedundefinedSelected Key of the menu item.
defaultExpandedKeysstring[][]The keys of the default expanded menu items.
activeKeystring | nullnullThe key of the active menu item.

Types

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

NameTypeDescription
update:value(key: string, item: MenuOption)Emitted when the value changes
update:expanded-key(keys: string[])Emitted when the expanded keys change

Methods

NameTypeDescription
deriveResponsiveState() => voidRecalculates 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) => voidShow the option