CSS: menu

.instui-menu — Une surface déroulante d’éléments, de groupes et de séparateurs.

Composez les entrées en tant que .item (voir le membre menu.item), étiquetez une section avec .group (voir menu.group) et séparez les sections avec .separator (voir menu.separator).

Source: group.css

Utilisation

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

Exemples

<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 consommés

Token	Type	Valeur
--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

Sous-composants

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

Connexe

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