CSS: menu

.instui-menu — Yon meni déroulan ki gen atik, gwoup, ak separatè.

Konpoze antre yo kòm .item (gade manm menu.item), mete yon etikèt sou yon seksyon ak .group (gade menu.group), epi divize seksyon yo ak .separator (gade menu.separator).

Source: group.css

Itilizasyon

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

Egzanp

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

Estrikti

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

Token	Tip	Valè
--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

Sou-konpozan

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

Ki gen rapò

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