Navigation

NavItem

Sidebar navigation row with three slots: dot (left) / label (middle) / aside (right). Renders a <button>.

Examples

Sidebar

<Card padding={false}>
  <div class="navlist">
    <NavItem active={active === 'library'} onclick={() => active = 'library'}>
      {#snippet dot()}<Lamp state="running" />{/snippet}
      Library
      {#snippet aside()}1,204{/snippet}
    </NavItem>
    …
  </div>
</Card>

Props

Prop	Type	Default	Description
`active`	`boolean`	`false`	Highlight the row as the current page.
`dot`	`Snippet`	`—`	Left-side slot — typically a <Lamp /> or icon.
`aside`	`Snippet`	`—`	Right-side slot — count, badge, etc.
`...rest`	`HTMLButtonAttributes`	`—`	Spread onto the underlying <button>.

Install

CLI

npx @a3tai/mittsu add nav-item