Navigation bar

A navigation bar answers one question on every page: where else can I go. It is the site’s table of top-level places, laid out in a row and repeated identically everywhere, with the wordmark at one end acting as the link home and an account control at the other. Repetition is the whole value, so the bar earns its space by never changing: the same destinations in the same order, with only the current-page marker moving. Keep the list short enough to read in one glance (roughly five to seven items), wrap it in a nav element so the navigation landmark exists, and mark the destination you are on with aria-current="page" rather than colour alone.

The confusable neighbours all live at the top of the screen too. An app bar carries the title and actions of the screen you are currently on, so its contents change as you move; a navigation bar carries the places you can move to, so its contents do not. A toolbar holds verbs (bold, undo, export) rather than places. Tabs also sit in a row and mark one item as selected, but they switch panels inside a single page without changing the address, and a reader who bookmarks a tab is usually disappointed. If your row of links is the site’s spine, it is a navigation bar; if it is the page’s own contents, it is tabs.

The naming is unusually messy, and most of the mess comes from native platforms. Apple’s UIKit has called the top strip of an iOS screen a UINavigationBar since the first iPhone, but that bar holds a back button and the current screen’s title, which is much closer to what the web calls an app bar. Material Design moved in the opposite direction and gave “navigation bar” to the bar of destinations pinned to the bottom on small screens. Bootstrap’s “navbar” is the version most web developers mean, and it is the one this entry describes.

Component libraries rarely ship the strip itself, because the strip is mostly layout: a flex row, a logo, and a list. What they ship is the interactive part, the list of links with its optional dropdowns, which Radix, Base UI and shadcn all call a navigation menu. Carbon is the exception among tracked systems, shipping the whole top strip as its UI shell header. When you are naming things in your own codebase, SiteHeader for the strip and MainNav for the list inside it is a division most readers guess correctly on the first try.