nav

Sidebar navigation from an array, with optional collapsible groups.

Example

Audience Segments 24

Laravel

<x-admin::nav :groups="[
    ['label' => null, 'items' => [['label' => 'Overview', 'href' => '#', 'icon' => 'home', 'active' => true]]],
    ['label' => 'Audience', 'collapsible' => true, 'open' => true, 'items' => [['label' => 'Segments', 'href' => '#', 'icon' => 'layers', 'count' => 24]]],
]" />

Props

PropRequiredDefaultOptions
groups[]

Other stacks

React and Vue: import { Nav } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<nav class="adm-nav" >
                            <a class="adm-nav__item" href="#"  aria-current="page" >
            <svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z"/></svg>            <span class="adm-nav__text">Overview</span>
                    </a>
                </nav>
                    <details class="adm-nav"  open >
            <summary class="adm-nav__label adm-nav__summary">Audience<svg class="adm-icon adm-collapsible__chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></summary>
                <a class="adm-nav__item" href="#" >
            <svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg>            <span class="adm-nav__text">Segments</span>
            <span class="adm-nav__count">24</span>        </a>
                </details>