Nav Item

Single sidebar/rail link or button row inside ab-nav / ab-nav-group.

HTML tag: c-ef651edb8a7d24f0fbd4c60e6a9d10287

When to use

one sidebar or rail link
child inside ab-nav or ab-nav-group
not document tabs or popup menu rows

Props

Prop	Type	Default
`label`	String
`href`	String
`active`	Boolean
`disabled`	Boolean
`icon_left`	String
`badge`	String
`short_label`	String
`aria_label`	String
`target`	String
`router_link`	Boolean
`icon_right`	String
`indent_level`	Number
`appearance`	String	`ghost`
`tone`	String	`neutral`
`size`	String	`md`
`density`	String	`comfortable`
`full_width`	Boolean	`true`
`rail`	Boolean
`tabindex`	String	`0`
`aria_current_when_active`	String	`page`
`layout`	String	`inline`
`stacked_in_rail`	Boolean	`true`
`icon_size_rail`	String	`lg`
`label_size_rail`	String	`xs`
`label_lines_rail`	Number	`1`
`align`	String	`center`
`shape`	String	`rounded`
`icon_behavior`	String	`left`
`trailing_icon`	String
`trailing_icon_rail`	String
`trailing_icon_tone`	String	`neutral`
`trailing_icon_size`	String	`md`
`show_trailing_in_rail`	Boolean
`label_wrap_mode`	String	`wrap`

Rules

Set label, href (or router_link), active, disabled, icon_left, badge.
Parent ab-nav handles routing via navigation_items — items may be rendered programmatically.
No custom host events; selection updates url-changed on ab-nav.
Use short_label and stacked_in_rail for compact rail tiles.

Methods

Signature	Description
`focus_item()`
`press()`

What to avoid

Do not use for document tabs (ab-tabs/ab-tab). Do not use for dropdown commands (ab-menu-item). Do not expect tab-activate events here.

Example

<c-ef651edb8a7d24f0fbd4c60e6a9d10287 .label=${'Dashboard'} .href=${'/dashboard'} .active=${isActive} .icon_left=${'mi:home'}></c-ef651edb8a7d24f0fbd4c60e6a9d10287>