Usage

NavItem is one row in a sidebar, top bar, or menu. It renders a link when href is set, and a button when it is disabled or has no address. Pass a CSS icon class through iconClass, or use the icon slot. NavIcon, exported from the same entry, draws the round emphasis badge.

The link root defaults to a. Pass RouterLink as as and the item sets both href and to.

<script setup lang="ts">
import { NavItem } from '@astryx-vue/core/NavItem'
</script>

<template>
  <NavItem href="/home" icon-class="i-carbon-home" is-selected label="Home" />
</template>

Best practices

Guidance	Practice
Do	Set isSelected for the current page. The item writes aria-current="page".
Do	Turn on isIconOnly when the label should stay available to assistive tech only.
Avoid	Do not ship a built-in icon component. Icons stay as a class or a slot.

Examples

Basic

Round icon containers for a navigation header. Search and calendar sit side by side.