Skip to content

Nav Item

@astryxdesign/core v0.7.1 · NavItem

NameTypeDefaultDescription
labelstring-Visible text. Becomes the accessible name in icon-only mode.
hrefstring-Renders a link when set and the item is not disabled.
asNavLinkComponent'a'Link root, for example RouterLink.
targetstring-Link target. _blank also adds noopener noreferrer.
relstring-Link rel.
isSelectedbooleanfalseCurrent page. Sets aria-current="page".
isDisabledbooleanfalseRenders a button that is removed from tab order.
size'sm' | 'md' | 'lg''md'Height and padding.
iconClassstring-CSS icon class, such as i-carbon-home.
selectedIconClassstring-Replaces iconClass while selected.
isIconOnlybooleanfalseShows the icon only. The label stays for assistive tech.
blockbooleanfalseStretches to the row width.
plainbooleanfalseDrops the item chrome so a parent can paint it.
expandedboolean-Whether a nested group is open. Omitted when unset.
controlsstring-Id written to aria-controls.
hasPopupstring-Popup type written to aria-haspopup.
NameDescription
clickFired on click. A disabled item prevents the default action first.
NameDescription
defaultReplaces the visible label.
iconIcon content. Used ahead of the glyph from iconClass.
selectedIconIcon shown while selected.
endTrailing content, such as a chevron or count.
NameTypeDefaultDescription
iconClassstring-CSS icon class drawn on the round badge.
size'sm' | 'md' | 'lg''md'Badge diameter.
labelstring-Accessible name. Without it the badge is hidden from assistive tech.