Usage

Accessible menu container and items for nav heading popovers. NavHeadingMenu provides role="menu" with keyboard navigation; NavHeadingMenuItem renders individual selectable items. Pass it to the menu slot of SideNavHeading or TopNavHeading.

import { NavHeadingMenu } from '@astryx-vue/core/NavMenu'

<script setup lang="ts">
import { NavHeadingMenu, NavHeadingMenuItem } from '@astryx-vue/core/NavMenu'
import { SideNav, SideNavHeading } from '@astryx-vue/core/SideNav'
</script>

<template>
  <SideNav>
    <template #header>
      <SideNavHeading heading="Acme Platform">
        <template #menu>
          <NavHeadingMenu label="Acme Platform" size="lg">
            <NavHeadingMenuItem href="/dashboard" label="Dashboard" />
            <NavHeadingMenuItem href="/analytics" label="Analytics" />
          </NavHeadingMenu>
        </template>
      </SideNavHeading>
    </template>
  </SideNav>
</template>

Anatomy

Element	Description
Menu	Menu container for nav-heading actions, with menu semantics and keyboard navigation.
Item	Selectable action or navigation link inside the Menu.
Icon	Icon-rendered artwork shown before an Item label.
Text-rendered item label	String Item label rendered through Text.
Caller-rendered item label	Non-string Item label content rendered directly by the caller.
Item description	Supporting description rendered through Text.