---
title: Navigation menu
description: Three menu patterns — a top navbar, a sidebar with an active item, and a breadcrumb trail.
group: navigation
---
A horizontal top bar with a logotype, plain-text links, an active state picked out with `ink-prominent`, and a primary action pinned to the end with `ml-auto`.
```html
Varde
```
A sidebar with a search field, grouped section labels, an active row lifted with `surface-tinted`, and two expandable sections (built with native ``/`` — no JS needed) that reveal a nested list of links.
```html
```
A breadcrumb trail, links until the last (current) crumb, which is plain text.
```html
```
A collapsed, icon-only rail — the same links as the sidebar above, reduced to a narrow column. Each icon carries a `title` and `aria-label` so its name is still available on hover and to assistive tech.
```html
```