Nav Group

Navigation group includes all the actions or items in a single group and is used for grouping items into related categories.

<ahi-nav-group title="Navigation" 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 group. Nav group picks it up on its own — a consumer sets nav-rail on the layout and nothing else.

A rail is too narrow for a group heading, so in one the heading is taken out of sight rather than left to be clipped by the rail’s edge:

• The heading is hidden visually but kept in the accessibility tree, because it is what names the group’s list. display: none would leave every railed group anonymous.
• A group that follows another one is separated by a divider in place of its heading, so two consecutive groups still read as two groups.
• The first group gets no divider and no heading space, so a rail does not open with a stray rule under the navigation’s own header. A single group — one ahi-nav-group wrapping a whole navigation — is the same case, and comes out with neither.

Nothing above applies outside a rail; it is all inside a single style query, so a group that is not in one renders exactly as it always has.

Importing

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

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

Slots

Learn more about using slots.

Properties

Learn more about properties and attributes.

CSS Parts

Learn more about customizing CSS parts.