Navs and Tabs

Navs and Tabs

Navs provide navigation links while tabs provide a UI for switching between related content panels on the same page.

Core concept

Explain nav, nav-link, active state, nav-tabs, tab-content, tab-pane, data-bs-toggle=tab, and the ARIA relationships created by the tab pattern.

Using it in a real interface

Build a settings page with General, Security, and Notifications tabs. Explain how the visible pane changes without a full page navigation and why tab labels should remain short.

Implementation notes

Use tabs when users are switching between closely related views, not when the content represents a true navigation hierarchy. Do not hide critical information behind tabs without considering discoverability.