# Navigation — bars, sidebars, tabs, menus, command palette Source: https://ui.barua.tz/docs/navigation.html Rules and conventions: https://ui.barua.tz/llms.txt ## Top Navigation .b-topnav is the sticky glass chrome bar you are looking at right now — brand, inline links, and trailing actions separated by a .b-spacer . Reach for it on marketing pages and docs with a handful of destinations; move to a sidebar or rail once the map outgrows one row. Demoed with position: static so it stays in the box. - Documentation: https://ui.barua.tz/docs/navigation.html#top-navigation - Classes: `b-btn` `b-btn--ghost` `b-btn--primary` `b-btn--sm` `b-spacer` `b-topnav` `b-topnav__brand` `b-topnav__link` `b-topnav__links` ```html

Acme

``` ```tsx import { Button, Spacer, TopNav, TopNavBrand, TopNavLinks } from "barua-ui"; Acme Overview Projects Activity Docs ``` ## Sidebar .b-sidebar stacks grouped items with uppercase headings — the pattern for apps with many destinations (this docs site uses one). Items take an optional icon and a trailing .b-badge for counts; add .b-sidebar--surface when it needs its own background and end hairline. Boxed here at a fixed height to show the built-in scroll. - Documentation: https://ui.barua.tz/docs/navigation.html#sidebar - Classes: `b-badge` `b-badge--accent` `b-sidebar` `b-sidebar__group` `b-sidebar__heading` `b-sidebar__item` ```html

Mailboxes

Inbox 24 Sent Drafts 3 Home Search Library ``` ```tsx import { Rail, RailItem } from "barua-ui"; Home Search Library ``` ## Bottom Navigation .b-bottomnav is the phone-sized counterpart: a fixed glass tab bar with three to five destinations, safe-area padding included. The active item tints accent; the rest stay quiet. Demoed with position: static . - Documentation: https://ui.barua.tz/docs/navigation.html#bottom-navigation - Classes: `b-bottomnav` `b-bottomnav__item` ```html

Home Search Alerts Home Search Alerts ``` ## Tab Bar .b-segmented is the iOS-style segmented control: pill segments on a recessed fill, the selected one lifted on a white chip. Use it to switch views of the same content (Day / Week / Month); use underline Tabs for page-level sections. .b-segmented--block stretches it full width. Both .is-active and [aria-selected="true"] light a segment. - Documentation: https://ui.barua.tz/docs/navigation.html#tab-bar - Classes: `b-segmented` `b-segmented--block` `b-segmented__item` ```html

``` ```tsx import { Segmented } from "barua-ui"; ``` ## Tabs Underline tabs for sectioning a page. Wrap everything in a data-b-tabs container, give triggers role="tab" and panels role="tabpanel" , and mark the initial tab aria-selected="true" — barua.js wires selection, panel visibility and the roving tabindex from there. The tab list scrolls horizontally when it overflows. - Documentation: https://ui.barua.tz/docs/navigation.html#tabs - Classes: `b-tab` `b-tabpanel` `b-tabs` ```html

A calm summary of the project: readme, recent activity, and the people involved.

128 commits on main, most recently "Polish glass materials".

``` ```tsx import { Tabs } from "barua-ui";

A calm summary of the project: readme, recent activity, and the people involved.

128 commits on main , most recently "Polish glass materials".

``` ## Breadcrumbs A trail from root to here, separated by hairline chevrons. Use them in hierarchies deeper than two levels; the last crumb is the current page — give it aria-current="page" and no link. - Documentation: https://ui.barua.tz/docs/navigation.html#breadcrumbs - Classes: `b-breadcrumbs` ```html ``` ```tsx import { Breadcrumbs } from "barua-ui"; ``` ## Pagination Numbered page controls with tabular figures so widths never jitter. The current page fills accent via .is-active or [aria-current="page"] ; collapse long runs with .b-pagination__ellipsis . - Documentation: https://ui.barua.tz/docs/navigation.html#pagination - Classes: `b-pagination` `b-pagination__ellipsis` `b-pagination__item` ```html ``` ```tsx import { Pagination, PaginationEllipsis, PaginationItem } from "barua-ui"; ``` ## Stepper .b-steps shows progress through a linear flow. Each li carries its number in data-step ; .is-complete swaps it for an accent checkmark and fills the connector, .is-active rings the current step. Keep labels to one or two words. - Documentation: https://ui.barua.tz/docs/navigation.html#stepper - Classes: `b-steps` ```html

Account
Shipping
Payment
Review

``` ```tsx import { Steps } from "barua-ui";

Account

Shipping

Payment

Review

``` ## Menu Bar .b-menubar is the desktop-app strip of menu titles. Hover, .is-active and [aria-expanded="true"] all paint the solid accent highlight, so an open dropdown keeps its title lit. Pair each title with a dropdown menu for the real thing. - Documentation: https://ui.barua.tz/docs/navigation.html#menu-bar - Classes: `b-menubar` `b-menubar__item` ```html

``` ```tsx import { MenuBar, MenuBarItem } from "barua-ui"; File Edit View Window Help ``` ## Dropdown Menu details.b-dropdown opens a glass .b-menu with zero JavaScript. Menus compose from items with optional .b-menu__shortcut hints, a .b-menu__label , hairline .b-menu__separator s, disabled items, and a .b-menu__item--danger kept last. Add .b-dropdown--end to right-align the panel. - Documentation: https://ui.barua.tz/docs/navigation.html#dropdown-menu - Classes: `b-btn` `b-dropdown` `b-menu` `b-menu__item` `b-menu__item--danger` `b-menu__label` `b-menu__separator` `b-menu__shortcut` ```html ``` ```tsx import { Button, Dropdown, Menu, MenuLabel, MenuSeparator } from "barua-ui"; Repository

``` ## Context Menu The same .b-menu component, summoned by right-click instead of a trigger button. In production, listen for contextmenu , show the menu with the popover attribute and position it at the pointer — the glass panel, items and states are identical. Shown here as a static instance. - Documentation: https://ui.barua.tz/docs/navigation.html#context-menu - Classes: `b-menu` `b-menu__item` `b-menu__item--danger` `b-menu__separator` `b-menu__shortcut` ```html ``` ```tsx import { Menu, MenuSeparator } from "barua-ui";

``` ## Command Menu .b-cmdk is the ⌘K palette: a search field over a grouped command list on heavy glass. In this docs site it lives in a