section-nav · Admiral UI kit

Example

Laravel

<x-admin::section-nav label="Settings" :items="[
    ['label' => 'Segment owners', 'href' => '#', 'active' => true, 'icon' => 'users'],
    ['label' => 'Perk contact', 'href' => '#', 'icon' => 'mail'],
    ['label' => 'RaceCheck reviews', 'href' => '#', 'icon' => 'flag', 'count' => 4],
]" style="max-width:16rem" />

Props

Prop	Required	Default	Options
`items`		`[]`
`label`		`null`

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

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

HTML, for any stack

<nav class="adm-section-nav" style="max-width:16rem;" aria-label="Settings">
    <ul>
                    <li>
                <a class="adm-section-nav__item" href="#"  aria-current="page" >
                    <svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0M16 3.5a4 4 0 0 1 0 9M22 21a7 7 0 0 0-4-6.3"/></svg>                    <span class="adm-section-nav__label">Segment owners</span>
                                    </a>
            </li>
                    <li>
                <a class="adm-section-nav__item" href="#" >
                    <svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>                    <span class="adm-section-nav__label">Perk contact</span>
                                    </a>
            </li>
                    <li>
                <a class="adm-section-nav__item" href="#" >
                    <svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg>                    <span class="adm-section-nav__label">RaceCheck reviews</span>
                    <span class="adm-nav__count">4</span>                </a>
            </li>
            </ul>
</nav>