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>
External links
Set target to open a nav item’s link somewhere else, such as a new tab for a page outside the
app. The link then gets rel="noreferrer noopener", the same default as
Button, so the page it opens can’t
reach back to this one. Any non-empty target gets it, _self included, and
noreferrer also stops the next page learning which page the link was on. A nav item with no
target gets no rel unless you give one.
A rel of your own replaces the default rather than adding to it, so include
noreferrer noopener to keep them, as in rel="external noreferrer noopener". An
empty rel drops it.
<ahi-nav-group style="max-width: 256px;">
<ahi-nav-item href="#" icon="home">Dashboard</ahi-nav-item>
<ahi-nav-item href="https://example.com/" target="_blank" icon="help">
Help center
<ahi-icon name="external-link" size="minor" style="vertical-align: middle;" label="opens in a new tab"></ahi-icon>
</ahi-nav-item>
</ahi-nav-group>
Tell people before a link opens a new tab. Nav item draws no icon for it, so slot one with a
label after the text, as above, or say so in the label itself. A label too long for the nav is
cut off, and the icon after it is hidden with it, so keep an external link’s label short.
target and rel only apply to a link. A nav item with a subnav is a toggle, and one
with no href is a button, so both ignore them.
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
|
- | |
target
|
Tells the browser where to open the link. Only used when href is set and there is no
subnav.
|
'_blank' | '_parent' | '_self' | '_top' | null | undefined
|
- | |
rel
|
The link’s rel attribute. Only used when href is set and there is no
subnav. When target is set and rel isn’t, the link gets
noreferrer noopener, the same default as ahi-button, so the page it opens
can’t reach back to this one. Any non-empty target gets it,
_self included, and its noreferrer also stops the link sending a Referer.
Set rel to an empty string to drop it. A link with no target gets no
rel unless you give one.
|
string | null | 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>