Skip to content
Barua UI v0.2
Components

Navigation

Wayfinding for every surface: glass chrome bars along the edges, sidebars and rails for dense apps, menus and palettes for commands, breadcrumbs and steppers for orientation. Every piece marks the current location from the same accent token — .is-active for looks, aria-current and aria-selected for meaning.

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.

Acme
Accessibility. Navigation lives in landmarks: wrap each link set in <nav> with a unique aria-label ("Primary", "Breadcrumb", "Pagination") so screen-reader users can jump between them. Put a .b-skip-link before the chrome, and pair the visual .is-active class with aria-current="page" on the current link — one paints it, the other announces it.

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.

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.

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.

A calm summary of the project: readme, recent activity, and the people involved.
Accessibility. Tabs follow the roving-tabindex model: only the selected tab sits in the tab order, ← and → move focus and selection (handled by barua.js), and Tab jumps from the tab list into the visible panel. Each panel is labelled by its tab via aria-labelledby; hidden panels get the hidden attribute, so they vanish from the accessibility tree too.

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.

Accessibility. Wrap pagination in <nav aria-label="Pagination">, put aria-current="page" on the current page (the CSS lights it up from that attribute alone), label the chevron-only prev/next controls with aria-label, and hide the decorative ellipsis with aria-hidden="true".

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.

  1. Account
  2. Shipping
  3. Payment
  4. Review

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.

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 <dialog data-b-cmdk-root> — any button with data-b-cmdk="#id" opens it, and barua.js binds ⌘K / Ctrl K globally (try it). Below is a static inline instance showing the anatomy.

  • Navigate
  • Actions
↑↓ navigate↵ selectesc close
↵ openesc close