material-navigation-group — @viewflow/material

expanded rail with groups — sub-items are label-only; the "Components" group persists its state via storage-key (reload to check); ↑/↓ traverse group headers and visible sub-items

Page content

collapsed rail — a group renders like a collapsed item; activating it expands the rail and opens the group

Page content

RTL — indentation and chevron mirror with the reading direction

محتوى الصفحة

Sample usage

<material-navigation-rail expanded label="Docs">
  <material-navigation-item icon="home" label="Overview" active></material-navigation-item>

  <!-- storage-key persists the open state across reloads -->
  <material-navigation-group icon="widgets" label="Components"
                             storage-key="docs-components" open>
    <material-navigation-item label="Buttons" href="/buttons"></material-navigation-item>
    <material-navigation-item label="Cards"   href="/cards"></material-navigation-item>
  </material-navigation-group>
</material-navigation-rail>

<script>
  document.querySelector('material-navigation-group')
    .addEventListener('materialGroupToggle', (e) => console.log(e.detail)); // { open }
</script>