NavigationBar — uicraft

Default

Back button, centered title, and trailing action.

html

<nav class="uc-flex uc-items-center uc-justify-between uc-h-11 uc-px-4 uc-border-b">
  <button>&larr; Back</button>
  <h1 class="uc-text-sm uc-font-semibold">Settings</h1>
  <button>Done</button>
</nav>

With Large Title - Collapsed

Standard inline title after scrolling.

html

<nav class="uc-sticky uc-top-0 uc-bg-neutrals-surface/80 uc-backdrop-blur-md uc-border-b">
  <div class="uc-flex uc-items-center uc-justify-between uc-h-11 uc-px-4">
    <button>&larr;</button>
    <h1 class="uc-text-sm uc-font-semibold">Inbox</h1>
    <button>...</button>
  </div>
</nav>

With Large Title - Expanded

Large title displayed below the navigation bar.

html

<nav class="uc-sticky uc-top-0 uc-bg-neutrals-surface/80 uc-backdrop-blur-md uc-border-b">
  <div class="uc-flex uc-items-center uc-justify-between uc-h-11 uc-px-4">
    <button>&larr;</button>
    <button>...</button>
  </div>
  <div class="uc-px-4 uc-pb-2">
    <h1 class="uc-text-2xl uc-font-bold">Inbox</h1>
  </div>
</nav>

With Search

Search bar displayed below the title.

html

<nav class="uc-sticky uc-top-0 uc-bg-neutrals-surface/80 uc-backdrop-blur-md uc-border-b">
  <div class="uc-flex uc-items-center uc-justify-between uc-h-11 uc-px-4">
    <button>&larr;</button>
    <h1 class="uc-text-sm uc-font-semibold">Contacts</h1>
    <button>+</button>
  </div>
  <div class="uc-px-4 uc-pb-2">
    <input type="text" placeholder="Search" class="uc-w-full uc-h-9 uc-rounded-lg uc-bg-neutrals-muted">
  </div>
</nav>

Transparent

No border, for use over hero sections or images.

html

Profile Title

Transparent navigation for hero sections

<nav class="uc-sticky uc-top-0 uc-flex uc-items-center uc-justify-between uc-h-11 uc-px-4">
  <button>&larr; Back</button>
  <div class="uc-flex uc-gap-2">
    <button>...</button>
    <button>...</button>
  </div>
</nav>

API Reference

All CSS classes available for the NavigationBar component.

Class	Type	Description
`uc-sticky uc-top-0 uc-z-40`	Position	Sticky positioning at top with high z-index
`uc-h-11`	Size	Standard navigation bar height (44px)
`uc-bg-neutrals-surface/80 uc-backdrop-blur-md`	Background	Semi-transparent frosted glass effect
`uc-border-b uc-border-border-default`	Border	Bottom border separator
`uc-flex uc-items-center uc-justify-between`	Layout	Horizontal layout with leading, title, trailing areas
`uc-absolute uc-left-1/2 uc--translate-x-1/2`	Layout	Centered title positioning
`uc-text-sm uc-font-semibold`	Typography	Inline title text style
`uc-text-2xl uc-font-bold uc-tracking-tight`	Typography	Large title text style
`uc-text-accents-blue`	Color	Action button text color
`uc-min-w-[70px]`	Size	Minimum width for leading/trailing areas to balance centering

Accessibility

Keyboard and screen reader support.

Feature	Details
Landmark	Use nav element with aria-label to create a navigation landmark
Current	Active item should have aria-current="page"
Keyboard	All navigation items focusable via Tab, activated via Enter
Mobile	Collapsed menu toggle needs aria-expanded and aria-label