General

Nav Link Item

Generic navigation list-row link primitive used by footer, mobile, and side-by-side menus.

Overview

NavLinkItem is the generic row primitive for navigation lists. It renders as a NuxtLink when href is set and takes an optional leading icon. Footer, MobileMenuBasic, MobileMenuShop, and MenuSideBySide are all built on top of it.

Key Business & UX Benefits

One shared primitive backs footer, mobile, and side-by-side menus, so navigation tone and spacing stay aligned across every entry point.
NuxtLink integration means prefetching and route transitions work for free, keeping menu taps fast on the mobile devices that drive most traffic.
Optional leading icons make help, account, and policy links scannable without bespoke layout work in each menu.

Usage

NavLinkItem Default

<NavLinkItem href="/help" icon="question-circle">Help</NavLinkItem>

Feature List

Renders as `NuxtLink` when `href` is set (with route prefetching) and as a `div` otherwise, keeping non-link rows on the same template
Typed `icon` prop (uses the `IconName` union) places a leading m-sized LIcon, so help and policy rows stay scannable
Default slot owns the label, so callers can pass markup, badges, or counts alongside the text
`hug` modifier (`nav-link-item--hug`) tightens the row, used inside compact menus and footer columns
Underpins Footer, MobileMenuBasic, MobileMenuShop, and MenuSideBySide so navigation rhythm stays consistent across entry points

API Reference

Prop	Default	Type
`href`		`string`
`icon`		`IconName ("actions/login-1" \| "actions/logout-1" \| 120 more)`
`hug`		`boolean` Removes the fixed row height so multi-line content can expand naturally.

Slot	Type
`default`	`any`

Edit this pageorReport an issue

Media Stage

Bare media + content stage primitive that derives surface tone from the configured background color.

Nav Section Heading

Generic navigation list heading primitive that renders as a `NuxtLink` when `href` is set.