CSS: menu

.instui-menu — A dropdown surface of items, groups, and separators.

Compose entries as .item, label a section with a .group heading, and divide sections with a .separator. A .item-info line adds secondary text inside an item.

Source: menu.css

Accessibility

Mark a checked item with aria-checked="true" (same styling as -active).

Usage

@import "@pantoken/components/components.css";
@import "@pantoken/components/menu.css";

Demo

Examples

<div class="instui-menu">
  <div class="group">Actions</div>
  <div class="item">Edit</div>
  <div class="item -active">Duplicate</div>
  <div class="separator"></div>
  <div class="item">Delete</div>
</div>

Actions

Edit

Duplicate

Delete

Structure

.instui-menu
  .group
  .item
  .separator

flowchart TD n0[".instui-menu"]:::cssdoc-root n1(".group"):::cssdoc-part n2(".item"):::cssdoc-part n3(".separator"):::cssdoc-part n0 --> n1 n0 --> n2 n0 --> n3 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Parts

Part	Description
.group	A labelled group heading.
.item	A menu entry; add -disabled, -highlighted, or -active/[aria-checked].
.item-info	Secondary info text within a menu item.
.separator	A divider rule between items.

Tokens consumed

Token	Type	Value
--instui-border-radius-md	<length>	0.5rem
--instui-border-width-sm	<length>	0.0625rem
--instui-color-stroke-base	<color>	light-dark(#8D959F, #6A7883)LightDark
--instui-component-menu-group-background	<color>	light-dark(#ffffff, #171B21)LightDark
--instui-component-menu-group-color	<color>	light-dark(#273540, #ffffff)LightDark
--instui-component-menu-group-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-menu-group-font-size	<length>	1rem
--instui-component-menu-group-font-weight	<integer>	600
--instui-component-menu-group-padding-horizontal	<length>	0.75rem
--instui-component-menu-group-padding-vertical	<length>	0.5rem
--instui-component-menu-item-active-background	<color>	light-dark(#1D354F, #EEF4FD)LightDark
--instui-component-menu-item-active-label-color	<color>	light-dark(#ffffff, #1D354F)LightDark
--instui-component-menu-item-background	<color>	light-dark(#ffffff, #171B21)LightDark
--instui-component-menu-item-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-menu-item-font-size	<length>	1rem
--instui-component-menu-item-font-weight	<integer>	400
--instui-component-menu-item-highlighted-background	<color>	light-dark(#EEF4FD, #2E5177)LightDark
--instui-component-menu-item-highlighted-label-color	<color>	light-dark(#273540, #F2F4F5)LightDark
--instui-component-menu-item-highlighted-label-info-color	<color>	light-dark(#273540, #F2F4F5)LightDark
--instui-component-menu-item-label-color	<color>	light-dark(#273540, #ffffff)LightDark
--instui-component-menu-item-label-info-color	<color>	light-dark(#576773, #AAB0B5)LightDark
--instui-component-menu-item-line-height	<length>	1.25rem
--instui-component-menu-item-padding-horizontal	<length>	0.75rem
--instui-component-menu-item-padding-vertical	<length>	0.5rem
--instui-component-menu-item-selected-highlighted-background	<color>	light-dark(#234465, #ffffff)LightDark
--instui-component-menu-max-width	<length>	16em
--instui-component-menu-min-width	<length>	8em
--instui-component-menu-separator-background	<color>	light-dark(#E8EAEC, #2D3D49)LightDark
--instui-component-menu-separator-height	<length>	0.0625rem
--instui-component-menu-separator-margin-horizontal	<length>	0.75rem
--instui-component-menu-separator-margin-vertical	<length>	0rem
--instui-opacity-disabled	<number>	0.5
--instui-spacing-space-xs	<length>	0.25rem

Related

• tree-browser — Both present nested, selectable entries.
• simple-select — A select's dropdown reuses this menu surface.