# Navigation

## Purpose

Navigation bars, tabs, breadcrumbs, sidebars.

## Decisions

- **App layout:** a **200px sidebar** with a **48px top bar**. On mobile the sidebar becomes a **burger (menu) icon** that slides it out as a drawer from the left; there is no bottom tab bar.
- **Top bar:** 48px high with a 28px avatar.
- **Top bar on mobile:** show the **logo mark only, not the name**, so the search field has room to expand.
- **Logo:** always a **link to the home page**.
- **Action groups:** a row of buttons that runs out of width **wraps** onto the next line.
- **Sidebar list:** expandable groups combined with a flat list and divider: no group headings, one list, and a 1px divider before Settings. **Nested items indent 11px**, with a **1px vertical guide line centred in that 11px gap** (5px either side). Each further level adds another 11px and another guide line, so the lines stack. The selected item is a violet fill.
- **Breadcrumbs:** chevron separators, the last item soft white and semibold, others grey. When they overflow, the middle collapses to a "…" menu.
- **Pagination:** numbered pages with arrows either side for paged lists; for content that loads continuously (infinite scrolling), a "Load more" button or automatic loading instead of page numbers.
- **Overflow and burger icons:** horizontal three dots for overflow menus. The **icon itself is the button**, with no border or box, for both the three dots and the burger menu. Hover and pressed states use the neutral surface hover and pressed fills from [Colour](../foundations/colour.md).