App Header

Pill header with a menu button on the left, centered brand mark, and search and avatar actions right.

Beste

Import & use

import { Nav28 } from "@/components/beste/piece/nav28";

<Nav28
  brand="Beste"
  avatarSrc="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=70&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fHByb2ZpbGV8ZW58MHx8MHx8fDA%3D"
  avatarAlt="Account"
  initials="BS"
/>

More Nav pieces

View all Nav

On this page

Anchor Nav

Docs-style on-this-page list with left borders and a primary active rail on the current section.

App Bar

Web-app bottom bar with five labeled icon tabs and a primary indicator above the active one.

Tab Bar Pill

Four-tab navigation pill that expands the active tab to show its label, with a count badge on alerts.

Context Menu

Right-click menu pointed by a corner arrow with icon rows and mono shortcut hints on the right.

Beste Sözenmira@beste.co

User Menu

Account dropdown with an avatar header, profile and settings rows, workspace switcher, and a Sign out action.

Bottom Nav

Mobile tab bar with labeled icons, a raised center create button, and a rose unread counter badge.