Navigation

Nav link

A styled link for navigation bars, with an active state for the current page.

Selector: a[muiNavLink]

Import

import { NavLink } from '@mushilu-san/ui/navigation';

Preview

Code

Loading example…

Overview

Nav link is applied to a native <a>, so it keeps the link role and keyboard behaviour. Set active for the current page, which adds aria-current="page".

Use variant to make the link look like plain text or a highlighted primary link, and size to fit the bar.

When to use

Links in a top bar or footer that should look like navigation.
Showing which section of the site is open.

When not to use

A call to action that performs an action. Use a Button. Use Button instead.

Guidelines

Do

Mark the current page with active.
Keep the list of links short, about five to seven.

Don't

Do not use a nav link for an action such as "Log out". Use a button.

Accessibility

Roles and attributes

Element	Role	Notes
`a[muiNavLink]`	link (native)	`aria-current="page"` when `active`.

Keyboard

Keys	Action
`TabShiftTab`	Moves focus between the links.
`Enter`	Follows the link.

Wrap the links in a <nav> with a label, such as the mui-navigation-menu does.

API

NavLink