Navigation

<ahi-navigation> | AhiNavigation

The navigation component is used to display the primary navigation in the sidebar of an application. Navigation includes a list of links that users use to move between sections of the application.

Dashboard

Messages

Documents

Contacts

Summary

Vitals

Weight

BMI

Blood pressure

Height

Body temperature

Heart rate

<ahi-navigation class="navigation" style="max-width: 256px;">
  <ahi-nav-group>
    <ahi-nav-item icon="home">Dashboard</ahi-nav-item>
    <ahi-nav-item icon="mail" badge="27">Messages</ahi-nav-item>
    <ahi-nav-item icon="file">Documents</ahi-nav-item>
    <ahi-nav-item icon="address-book">Contacts</ahi-nav-item>
  </ahi-nav-group>
  <ahi-nav-group title="Medical">
    <ahi-nav-item href="#" icon="layout-grid">Summary</ahi-nav-item>
    <ahi-nav-item icon="chart-bar">
      Vitals
      <ahi-nav-group slot="subnav">
        <ahi-nav-item href="#">Weight</ahi-nav-item>
        <ahi-nav-item href="#">BMI</ahi-nav-item>
        <ahi-nav-item href="#">Blood pressure</ahi-nav-item>
        <ahi-nav-item href="#" active>Height</ahi-nav-item>
        <ahi-nav-item href="#">Body temperature</ahi-nav-item>
        <ahi-nav-item href="#">Heart rate</ahi-nav-item>
      </ahi-nav-group>
    </ahi-nav-item>
  </ahi-nav-group>
</ahi-navigation>

<script>
  const navigation = document.querySelector(".navigation")

  // for demo purposes, activate nav items on click.
  // in most cases you should instead integrate with your router
  navigation.addEventListener("click", e => {
    if (e.target.matches("ahi-nav-item") && e.target.href) {
      e.target.active = true
      e.preventDefault()
    }
  })
</script>

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/navigation/navigation.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/navigation/navigation.js';

Slots

Name	Description
(default)	The default slot used for holding navigation components.
`header`	The top section of the sidebar.
`footer`	The bottom section of the sidebar.

Learn more about using slots.

Properties

Name	Description	Type	Default
`stickyFooter` `sticky-footer`	Controls whether the navigation’s footer has sticky positioning.	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about properties and attributes.

CSS Parts

Name	Description
`base`	Deprecated. Use the `navigation` part instead.
`navigation`	The component’s outer wrapper.
`header`	The navigation’s header.
`footer`	The navigation’s footer.

Learn more about customizing CSS parts.