Component

Navbar

Build responsive headers with brand, nav links, actions, sticky or glass styles, and a progress slot.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Navbar } from "@chitrank2050/monoline-ui/navbar"

Basic usage

<Navbar
  brand="Chitrank"
  layout="contained"
  links={[
    { href: "/blog", label: "Blog" },
  ]}
  actions={<Button size="sm">Contact</Button>}
  sticky
  glass
  progress={
    <Progress
      followScroll
      size="sm"
      className="absolute bottom-0 left-0 right-0 z-50 rounded-none bg-transparent"
    />
  }
/>

<Navbar layout="extended" sticky glass progress={<Progress followScroll size="sm" className="absolute bottom-0 left-0 right-0 z-50 rounded-none bg-transparent" />}>
  <Navbar.Brand href="/" mark={<span />} textStyle="monoline">
    monoline/ui
  </Navbar.Brand>
  <Navbar.Nav>
    <Navbar.Link href="/blog">Blog</Navbar.Link>
  </Navbar.Nav>
  <Navbar.Actions>
    <Button size="sm">Contact</Button>
  </Navbar.Actions>
</Navbar>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Navbar provides a responsive site header for a brand, primary links, and optional actions.

Avoid when

Navigation belongs in an application sidebar, has nested levels, or needs built-in disclosure state.

Accessibility

Navbar provides header and nav landmarks, labels the navigation, and marks the active link with aria-current page.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

sizesm | md | lgNavbar density and type scale

layoutcontained | extendedContained aligns with page content; extended fills app-shell headers

brandReactNodeLeft-side brand slot for data-driven usage

brandTextStylemonoline | cursiveBrand wordmark font style

linksNavbarLinkItem[]Optional data-driven nav link list

actionsReactNodeRight-side action slot

childrenReactNodeOverride with compound composition

progressReactNodeDirect progress bar or layout slot anchored under the sticky header (moves in sync on elastic scroll)

Navbar.Navcompound slotMiddle navigation region

linkComponentComponentTypeNext Link or router link adapter

stickybooleanApply sticky positioning top-0 (default: false)

glassbooleanTranslucent backdrop with blur filter (default: false)

Design tokens

Theme variables this component reads for color, spacing, and motion.

--ml-navbar-heightCSS varHeader minimum height per size

--ml-navbar-container-maxCSS varContained header max width

--ml-navbar-xCSS varInline container padding

--ml-navbar-link-gapCSS varNavigation item spacing

--focus-ringCSS varKeyboard focus treatment

Implementation

The source used by the example above, including any state it needs.

import { Navbar } from "@chitrank2050/monoline-ui/navbar"
import { Button } from "@chitrank2050/monoline-ui/button"
import { Progress } from "@chitrank2050/monoline-ui/progress"

export function SiteHeader() {
  return (
    <Navbar
      brand="Chitrank"
      layout="contained"
      brandTextStyle="cursive"
      links={[
        { href: "/blog", label: "Blog" },
      ]}
      actions={<Button size="sm">Contact</Button>}
      sticky
      glass
      progress={
        <Progress
          followScroll
          size="sm"
          className="absolute bottom-0 left-0 right-0 z-50 rounded-none bg-transparent"
        />
      }
    />
  )
}

Compare related components or review the package and theme setup.

01ComponentCommand SearchComponent · ReferenceReference→02ComponentButtonComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview