V2 componentsUpdated Oct 14, 2026

1<Menu>2  <Menu.Trigger>Actions</Menu.Trigger>3  <Menu.Content sideOffset={8}>4    <Menu.Item>Rename…</Menu.Item>5    <Menu.Item>Duplicate</Menu.Item>6    <Menu.Item disabled>Move to team (soon)</Menu.Item>7    <Menu.Separator />8    <Menu.Item variant="danger">Delete</Menu.Item>9  </Menu.Content>10</Menu>

Basic

Items, a separator, and a destructive action last.

tsx

1import { Menu } from '@highlight/ui'2 3export default function MenuBasic() {4  return (5    <Menu>6      <Menu.Trigger>Actions</Menu.Trigger>7      <Menu.Content>8        <Menu.Item>Rename…</Menu.Item>9        <Menu.Item>Duplicate</Menu.Item>10        <Menu.Item disabled>Move to team (soon)</Menu.Item>11        <Menu.Separator />12        <Menu.Item variant="danger">Delete</Menu.Item>13      </Menu.Content>14    </Menu>15  )16}

Checkbox and radio items

tsx

1import { useState } from 'react'2import { Menu } from '@highlight/ui'3 4export default function MenuSelection() {5  const [showTimestamps, setShowTimestamps] = useState(true)6  const [showSpeakers, setShowSpeakers] = useState(false)7  const [density, setDensity] = useState('comfortable')8 9  return (10    <Menu>11      <Menu.Trigger variant="outline">View</Menu.Trigger>12      <Menu.Content>13        <Menu.Group>14          <Menu.GroupLabel>Show</Menu.GroupLabel>15          <Menu.CheckboxItem checked={showTimestamps} onCheckedChange={setShowTimestamps}>16            <Menu.CheckboxItemIndicator />17            Timestamps18          </Menu.CheckboxItem>19          <Menu.CheckboxItem checked={showSpeakers} onCheckedChange={setShowSpeakers}>20            <Menu.CheckboxItemIndicator />21            Speaker names22          </Menu.CheckboxItem>23        </Menu.Group>24        <Menu.Separator />25        <Menu.Group>26          <Menu.GroupLabel>Density</Menu.GroupLabel>27          <Menu.RadioGroup value={density} onValueChange={setDensity}>28            <Menu.RadioItem value="comfortable">29              <Menu.RadioItemIndicator />30              Comfortable31            </Menu.RadioItem>32            <Menu.RadioItem value="compact">33              <Menu.RadioItemIndicator />34              Compact35            </Menu.RadioItem>36          </Menu.RadioGroup>37        </Menu.Group>38      </Menu.Content>39    </Menu>40  )41}

Submenu and links

tsx

1import { Menu } from '@highlight/ui'2 3export default function MenuSubmenu() {4  return (5    <Menu>6      <Menu.Trigger variant="primary">Share</Menu.Trigger>7      <Menu.Content>8        <Menu.Item>Copy link</Menu.Item>9        <Menu.SubmenuRoot>10          <Menu.SubmenuTrigger>Send to</Menu.SubmenuTrigger>11          <Menu.Content>12            <Menu.Item>Slack</Menu.Item>13            <Menu.Item>Notion</Menu.Item>14            <Menu.Item>Linear</Menu.Item>15          </Menu.Content>16        </Menu.SubmenuRoot>17        <Menu.Separator />18        <Menu.LinkItem href="https://highlightai.com" target="_blank">19          Open in browser20        </Menu.LinkItem>21      </Menu.Content>22    </Menu>23  )24}

Item variants

tsx

1import { Menu } from '@highlight/ui'2 3export default function MenuItemVariants() {4  return (5    <Menu>6      <Menu.Trigger variant="outline">Item variants</Menu.Trigger>7      <Menu.Content>8        <Menu.Item>Default</Menu.Item>9        <Menu.Item variant="primary">Primary</Menu.Item>10        <Menu.Item variant="bold">Bold</Menu.Item>11        <Menu.Item variant="success">Success</Menu.Item>12        <Menu.Item variant="danger">Danger</Menu.Item>13      </Menu.Content>14    </Menu>15  )16}

Icons are 14px at the system stroke, outline only: never mix filled glyphs into a list. Once any row has a leading icon, rows without one indent so every label starts on one edge. Menu.ItemText takes the title as children and an optional description, a second line in secondary ink that wraps while the title truncates; the row grows and the icon and check stay on the title’s line. Keep descriptions to one short sentence, and use them on every row of a group or none.

tsx

1import { Copy, Link, Mail, MessageSquare } from 'lucide-react'2import { Menu } from '@highlight/ui'3 4export default function MenuDescriptions() {5  return (6    <Menu>7      <Menu.Trigger variant="outline">Share</Menu.Trigger>8      <Menu.Content>9        <Menu.Item>10          <Link />11          <Menu.ItemText description="Anyone with the link can read the summary.">Copy link</Menu.ItemText>12        </Menu.Item>13        <Menu.Item>14          <MessageSquare />15          <Menu.ItemText description="Posts the summary and action items to a channel.">Send to Slack</Menu.ItemText>16        </Menu.Item>17        <Menu.Item>18          <Mail />19          <Menu.ItemText description="Emails every attendee a recap.">Email attendees</Menu.ItemText>20        </Menu.Item>21        <Menu.Separator />22        <Menu.Item>23          <Menu.ItemText>Export as Markdown</Menu.ItemText>24        </Menu.Item>25        <Menu.Item>26          <Copy />27          <Menu.ItemText>Duplicate</Menu.ItemText>28        </Menu.Item>29      </Menu.Content>30    </Menu>31  )32}

Node lead and static row

Menu.ItemLead is a 20px lane for something that is not an icon: a workspace tile, a person’s face. Put it first in the row. Once a list has one, every label starts after the 20px lane: bare rows indent to it and icon rows centre their 14px glyph in it, so leads and icons can share a list. Menu.Static has the row’s geometry but states rather than acts: not a menuitem, no keyboard stop, no hover.

tsx

1import { Menu } from '@highlight/ui'2import { LogOut, Plus } from 'lucide-react'3 4function Face({ children }: { children: string }) {5  return (6    <span className="bg-element text-foreground-secondary flex size-5 items-center justify-center rounded-full text-[10px] font-medium">7      {children}8    </span>9  )10}11 12function Tile({ children }: { children: string }) {13  return (14    <span className="bg-brand text-on-brand flex size-5 items-center justify-center rounded-[6px] text-[10px] font-medium">15      {children}16    </span>17  )18}19 20export default function MenuLeadAndStatic() {21  return (22    <Menu>23      <Menu.Trigger variant="outline">Account</Menu.Trigger>24      <Menu.Content>25        <Menu.Static>26          <Menu.ItemLead>27            <Face>JD</Face>28          </Menu.ItemLead>29          <Menu.ItemText description="jane@acme.com">Signed in as Jane</Menu.ItemText>30        </Menu.Static>31        <Menu.Separator />32        <Menu.Group>33          <Menu.GroupLabel>Workspaces</Menu.GroupLabel>34          <Menu.Item>35            <Menu.ItemLead>36              <Tile>A</Tile>37            </Menu.ItemLead>38            <Menu.ItemText>Acme</Menu.ItemText>39          </Menu.Item>40          <Menu.Item>41            <Menu.ItemLead>42              <Tile>P</Tile>43            </Menu.ItemLead>44            <Menu.ItemText>Personal</Menu.ItemText>45          </Menu.Item>46          <Menu.Item>47            <Plus />48            <Menu.ItemText>Create workspace…</Menu.ItemText>49          </Menu.Item>50        </Menu.Group>51        <Menu.Separator />52        <Menu.Item>53          <Menu.ItemText>Settings</Menu.ItemText>54        </Menu.Item>55        <Menu.Item>56          <LogOut />57          <Menu.ItemText>Sign out</Menu.ItemText>58        </Menu.Item>59      </Menu.Content>60    </Menu>61  )62}

Explaining a disabled item

Wrap a disabled Menu.Item in a Tooltip.Trigger rendered as a div, so the wrapper takes the pointer a disabled row gives up. Base UI keeps a disabled item focusable, so keyboard users reach the reason too.

tsx

1import { Menu, Tooltip } from '@highlight/ui'2 3export default function MenuDisabledReason() {4  return (5    <Menu>6      <Menu.Trigger variant="outline">Meeting</Menu.Trigger>7      <Menu.Content>8        <Menu.Item>9          <Menu.ItemText>Copy link</Menu.ItemText>10        </Menu.Item>11        <Tooltip>12          <Tooltip.Trigger render={<div />}>13            <Menu.Item disabled>14              <Menu.ItemText>Delete recording</Menu.ItemText>15            </Menu.Item>16          </Tooltip.Trigger>17          <Tooltip.Content side="right">Only the organizer can delete this recording.</Tooltip.Content>18        </Tooltip>19      </Menu.Content>20    </Menu>21  )22}

Parts

The root, then any compound sub-components. Every part accepts className and forwards the rest of its props to the element or Base UI part beneath it.

Menu: Base UI Menu.Root. Owns open state; renders nothing itself.
Menu.Trigger: Button-styled; variant, tone, size, shape.
Menu.Content: side, sideOffset, align, alignOffset, finalFocus.
Menu.Item / LinkItem: variant: 'default' | 'primary' | 'bold' | 'success' | 'danger'.
Menu.CheckboxItem / CheckboxItemIndicator: checked, onCheckedChange. The indicator trails the label and defaults to a check, the same mark Select uses.
Menu.RadioGroup / RadioItem / RadioItemIndicator: value, onValueChange. Same trailing check as CheckboxItem.
Menu.ItemText: The row’s text: title as children, optional description under it. Shared with ContextMenu, Select and Combobox.
Menu.ItemLead: A 20px leading lane for a tile or face in place of an icon. First child of the row.
Menu.Static: A non-interactive row with Item’s geometry. Not a menuitem.
Menu.Group / GroupLabel / Separator: Structure.
Menu.SubmenuRoot / SubmenuTrigger: Nest a Content inside SubmenuRoot.

Menu

Import

Playground