# syn-nav-item

## Summary

Flexible button / link component that can be used to quickly build navigations.

## Common Use Cases

- Populate an `<syn-prio-nav>` within a `<syn-header>` navigation bar at the top of a page, helping users easily access different sections.
- Implement navigation items in a `<syn-side-nav>` for a more detailed and hierarchical navigation structure.

## Usage Guidelines

### Background Options

- Use with background options of white, neutral-100, and primary-100.

### Labels and Icons

- Use clear, concise labels for navigation items.
- Don't use icons alone unless they are universally understood.
- Use icons and labels together to enhance comprehension.

### Spacing

- Use indented for nested navigation items in vertical desktop or mobile viewports and in horizontal mobile menus.

### Text Styles and Descriptions

- Be consistent in the use of descriptions: Include them for all items at the same level and keep them similar in length.

## Accessibility

- Provide a logical tab order that follows the visual sequence of navigation items and their different levels.
- Use aria-current="page" or aria-current="location" on the active navigation item to communicate the user's current location.

## Related Components

- syn-side-nav
- syn-prio-nav

## Related Templates

- AppShell
