NavLink

NavLink defines how EnterUI handles a calm navigation link with active, disabled, and badge states. The action variant gives dashboard shortcuts a title, supporting description, and directional cue without turning navigation into oversized buttons.

#Default usage

<VStack align="stretch" gap={12} fullWidth>
  <NavLink active href="/docs" badge={<Badge>New</Badge>}>Overview</NavLink>
  <NavLink href="/docs/components/button">Components</NavLink>
  <NavLink disabled href="/docs/disabled">Disabled</NavLink>
</VStack>

#Import

import { NavLink, VStack } from "@froggdesign/enter-ui-react";

#Dashboard shortcuts

Use the action variant for a compact group of links inside a card. Each row remains a native anchor, so users can open it in a new tab.

<nav aria-label="Quick access">
  <NavLink variant="action" href="/orders" description="Review orders and payments">
    Orders
  </NavLink>
  <NavLink variant="action" href="/customers" description="Find and update customer records">
    Customers
  </NavLink>
</nav>

#Accessibility

Active NavLink sets aria-current="page". Disabled links remove the href, set aria-disabled, and are skipped in tab order.

#API

• active marks the current page.
• disabled prevents navigation.
• badge renders trailing metadata.
• description adds supporting text beneath the link label.
• variant="action" creates a roomier, divided navigation row with a trailing chevron.
• Includes native anchor props and className.

#Styling

Uses .eui-nav-link classes with restrained active state.