Side Nav Item
Sourcecomponents/SideNavItem.astro
Default & active
One row of the Side Nav — a stroke icon and a label, with a soft hover fill and a violet-tinted active state for the current page. Renders <a>.
rest · hover · active
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
href | string | — | Destination. Required. |
label | string | — | The row text (or slot it as children). |
active | boolean | false | Current page — the soft-violet tinted state, with sets aria-current="page". |
icon (slot) | inline SVG | — | Slot the icon into slot="icon" — fill="none", stroke="currentColor", so it takes the row colour. |
Usage
Slot the icon into slot="icon" as an inline SVG. It's normally composed for you by Side Nav from its groups data.
<SideNavItem href="/website" label="Website">
<svg slot="icon" viewBox="0 0 20 20" fill="none">…</svg>
</SideNavItem>
<SideNavItem href="/shop" label="Alchemy Shop" active>
<svg slot="icon" viewBox="0 0 20 20" fill="none">…</svg>
</SideNavItem>Rules
Do
Keep icons from the one stroke set — fill="none", currentColor.
Mark only the current page active.
Don't
Use it for the site's horizontal menu — that's a Nav Item.
Colour the icon by hand — let it inherit the row colour.