Nav Item
<ahi-nav-item> | AhiNavItem
Navigation items provide links for the user to navigate across the main pages of the application.
<ahi-nav-group style="max-width: 256px;">
<ahi-nav-item href="#" icon="home" active>Dashboard</ahi-nav-item>
<ahi-nav-item href="#" icon="mail">Messages</ahi-nav-item>
</ahi-nav-group>
Inside a navigation rail
When Layout is showing a rail it publishes
--ahi-nav-rail: 1 onto its navigation region, and that value inherits down into every nav item.
Nav item picks it up on its own — a consumer sets nav-rail on the layout and nothing else.
In a rail each item renders icon-only:
- The label is clipped rather than hidden, so the item’s accessible name is unchanged. A screen reader still announces “Office overview”, and the icon is not what names the item.
-
The hit target grows to
--ahi-target-min-sizeon both axes — 44px on a coarse pointer, so a thumb has a full-size target even though the row is narrow. -
A
badgemoves onto the icon’s corner rather than leaving with the label it used to sit beside, so a count is still readable at a glance. - The subnav chevron is dropped, because tapping a subnav item expands the whole rail rather than opening the section in place.
Nothing above applies outside a rail; it is all inside a single style query, so an item that is not in one renders exactly as it always has.
Give rail-capable items an icon
icon is effectively required for any navigation that can be railed. Without one, an item falls
back to the first letter of its label in a disc — enough to tell two items apart, but a real icon is better:
<ahi-navigation slot="nav">
<ahi-nav-item icon="home" href="/">Office overview</ahi-nav-item>
<ahi-nav-item icon="calendar" href="/scheduler">Scheduler</ahi-nav-item>
<!-- No icon: shows "M" in a disc while railed -->
<ahi-nav-item href="/messages">Messages</ahi-nav-item>
</ahi-navigation>
The fallback is aria-hidden, since it abbreviates the label rather than naming the item.
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/nav-item/nav-item.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/nav-item/nav-item.js';Slots
| Name | Description |
|---|---|
| (default) | The default slot used for the navigation item’s text. |
subnav
|
Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link. |
Learn more about using slots.
Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
active
|
Used for indicating the current page. This gives a prominent background to the nav item, and marks the item as the current page for assistive technology. |
boolean
|
false
|
|
icon
|
The name of an icon to display for the nav item. |
string | undefined
|
- | |
href
|
The url the nav item should link to. Note: this is not used if you have nested navigation using the “subnav” slot. |
string | undefined
|
- | |
badge
|
Allows you to add a notification badge with a number next to the nav item. |
string | undefined
|
- | |
open
|
When the nav items contains a subnav, controls whether the section is expanded or not. Note: this is only used if you have nested navigation using the “subnav” slot. |
boolean
|
false
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
Events
| Name | Description | Event Detail |
|---|---|---|
ahi-activate |
Emitted after a nav item is selected. | - |
ahi-expand |
Emitted whenever a nav item’s state changes between open and closed. | - |
Learn more about events.
CSS Parts
| Name | Description |
|---|---|
base |
Deprecated. Use the nav-item part instead. |
nav-item |
The component’s outer wrapper. |
badge |
The navigation item’s badge. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<ahi-badge><ahi-icon>