CSS: menu

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

Compose entries as .item (see the menu.item member), label a section with .group (see menu.group), and divide sections with .separator (see menu.separator).

Source: group.css

Usage

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

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>

Structure

.instui-menu
  menu.group (component, 0..1)
  side-nav-bar.item (component, 0..n)
  menu.separator (component, 0..1)

flowchart TD n0[".instui-menu"]:::cssdoc-root n1(["menu.group"]):::cssdoc-component n2(["side-nav-bar.item"]):::cssdoc-component n3(["menu.separator"]):::cssdoc-component n0 -.->|0..1| n1 n0 -->|0..n| n2 n0 -.->|0..1| n3 click n1 "/api/css/menu.group.md" click n2 "/api/css/side-nav-bar.item.md" click n3 "/api/css/menu.separator.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Tokens consumed

Token	Type	Value
--instui-border-radius-md	<length>	0.5rem
--instui-border-width-sm	<length>	0.0625rem
--instui-color-stroke-base	<color>	LightDarklight-dark(#8D959F, #6A7883)
--instui-component-menu-item-background	<color>	LightDarklight-dark(#ffffff, #171B21)
--instui-component-menu-max-width	<length>	16em
--instui-component-menu-min-width	<length>	8em
--instui-spacing-space-xs	<length>	0.25rem

Subcomponents

• menu.group
• menu.item
• menu.separator
• side-nav-bar.item

Related

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