Navigation that shows where you are

The problem

People arrive from a link, a notification or a search. If the sidebar doesn't highlight the section, the tabs don't show which is open and there's no trail back, they get lost one click from home. On phones, a hidden hamburger menu hides the whole product.

When to use it

Use it for

Every app with more than one screen.
Deep pages people reach from links: a person's record, a request, a document.

Not for

Single-task flows, like sign-in or checkout: hide the main navigation and show progress with a Stepper.
Breadcrumbs in a flat app with one level: the sidebar already says where you are.

Anatomy

SidebarThe sections of the product. The current one has isCurrent.
BreadcrumbThe path to a deep page, from the section to the current item.
TabsViews of the same thing, like a person's Overview, Documents and Payroll.
TopAppBarOn phones: the page title and a Back control.
NavigationBarOn phones: 3 to 5 top-level sections at the bottom of the screen.

How to build it

Put the top-level sections in a Sidebar on desktop and a NavigationBar on phones. Same names, same order.
Set isCurrent on the item for the current section, including on deep pages inside it.
Add a Breadcrumb on pages two or more levels deep. The last item is the current page and isn't a link.
Use Tabs for views of one object; keep the selected tab in the URL so links and Back work.
Keep the bottom bar to 5 destinations or fewer. Move the rest into a More screen, not a hamburger menu.
Match the page title to the label people pressed to get there.

app.tsx

import { Breadcrumb, BreadcrumbItem, Sidebar, SidebarItem } from "@nexera-ui/react";
import { LuCalendar, LuLayoutDashboard, LuUsers } from "react-icons/lu";

<Sidebar aria-label="Main">
  <SidebarItem href="/" icon={<LuLayoutDashboard />} label="Dashboard" />
  <SidebarItem href="/people" icon={<LuUsers />} label="People" isCurrent />
  <SidebarItem href="/leave" icon={<LuCalendar />} label="Leave" />
</Sidebar>

<Breadcrumb aria-label="Breadcrumb">
  <BreadcrumbItem href="/people" label="People" />
  <BreadcrumbItem href="/people/design" label="Design" />
  <BreadcrumbItem label="Sara Khan" />
</Breadcrumb>

Accessibility

Keyboard support
Key	Action
`Tab`	Moves through sidebar and breadcrumb links in order.
`Arrow keys`	Move between tabs; the selected tab follows focus.
`Skip link`	The Sidebar's skip link jumps straight to the main content.

isCurrent sets aria-current="page", so screen readers say “current page”.
The current item is shown by weight and a marker, not by colour alone.
Each navigation is a named landmark (“Main”, “Breadcrumb”), so people can jump between them.
Labels stay visible on the bottom bar; icons alone are guesswork.

Do and don't

DoHighlight the current section on deep pages too.

Don'tLose the highlight as soon as people open a record.

DoUse a bottom NavigationBar with up to 5 labelled destinations on phones.

Don'tHide every section behind a hamburger menu.

DoUse the same words in the nav, the breadcrumb and the page title.

Don'tCall it “Team” in the sidebar and “People” on the page.