Gloss UI Kit v4.4 — Component Library

<Menu>
  <MenuGroup label="Dashboard" open>
    <MenuItem active icon={<Icon name="home" />}>
      Overview
    </MenuItem>
    <MenuItem icon={<ChartIcon />}>
      Analytics
    </MenuItem>
  </MenuGroup>
  <MenuGroup label="Settings">
    <MenuItem icon={<UserIcon />}>
      Profile
    </MenuItem>
  </MenuGroup>
</Menu>

Show Count Options

Control when item counts are displayed using the showCount prop on MenuGroup.

showCount="always"

showCount="collapsed-only"

showCount="never"

Nested Groups (Up to 3 Levels)

Menu supports up to 3 levels of nesting. Visual hierarchy is conveyed through typography (UPPERCASE for top-level, capitalized for nested) rather than indentation.

JSX

<Menu>
  <MenuGroup label="Components" showCount="never" open>
    <MenuGroup label="Input" showCount="collapsed-only">
      <MenuItem icon={<Icon name="input" />}>Text</MenuItem>
      <MenuItem icon={<Icon name="hash" />}>Number</MenuItem>
    </MenuGroup>
    <MenuGroup label="Output" showCount="collapsed-only">
      <MenuItem icon={<Icon name="grid" />}>Cards</MenuItem>
    </MenuGroup>
  </MenuGroup>
</Menu>

Interactive Example

Click on menu items to see the active state change.

Active: /dashboard

With Dividers

Disabled States

Both MenuGroup and MenuItem support disabled states.

Best Practices

Do

Use icons consistently across all items

Group related items together logically

Use showCount for groups with variable content

Keep labels short and descriptive

Don't

Nest more than 3 levels deep

Mix icons and no-icons in same group

Create empty groups without content

Use overly long menu item labels

Props Reference

MenuGroup

Prop	Type	Default	Description
`label`	`string`	`-`	Group header label (required)
`open`	`boolean`	`true`	Controlled open state
`onOpenChange`	`(open: boolean) => void`	`-`	Callback when open state changes (makes group collapsible)
`showCount`	`'always' \| 'collapsed-only' \| 'never'`	`'never'`	When to show item count

MenuItem

Prop	Type	Default	Description
`as`	`React.ElementType`	`-`	Polymorphic element type (e.g., Link, 'a')
`icon`	`React.ReactNode`	`-`	Icon to display
`active`	`boolean`	`false`	Active/selected state
`disabled`	`boolean`	`false`	Disable the item
`onClick`	`(e: MouseEvent) => void`	`-`	Click handler