Navigation Styles: Pills, Tabs, Underline

Navigation communicates hierarchy. The visual style of navigation items signals whether you're looking at primary navigation, secondary navigation, page-level tabs, or inline section switching. Different contexts benefit from different visual treatments.

Three navigation styles are available for every navigation component in the builder.

Pills

The pill style renders each navigation item as a rounded button. The active item has a filled pill background; inactive items have no background. The pill style works best for secondary navigation — the navigation inside a specific section of the app, below the primary sidebar.

Pills read as a set of choices at the same level. No hierarchy implied, no "parent" structure — just a flat set of options where one is currently selected. Good for filtering, for switching between related views, for sub-section navigation within a page.

Tabs

The tab style renders items as boxed tabs — rectangular, with borders on the sides and top, and the active tab connected to the content area below (no bottom border). The tabbed metaphor implies content switching: click a tab to see different content without leaving the page.

Tabs work best for in-page section switching — the structure inside a detail page, within a panel, inside a form with multiple stages. The visual language of tabs communicates that the content below will change based on the tab selected.

Underline

The underline style renders items as plain text with an underline indicator on the active item. This is the most minimal style — no boxes, no fills, just text and a colored line. Underline navigation recedes visually, letting the content take prominence.

Underline works well for navigation in content-heavy contexts where the navigation chrome should be subtle, and for navigation embedded within a section where visual weight needs to be low.

Configured Per Navigation Component

Each navigation component in the builder has a style setting. The top navigation bar might use underline. A section-level secondary navigation might use pills. A page-level tab switcher uses the tab style.

Mixing styles at different levels of the hierarchy creates appropriate visual weight hierarchy — strong styling for primary navigation, lighter styling for secondary, minimal styling for in-page navigation.