Navbar

A responsive navigation bar with mobile menu support.

Installation

bash
npx @smicolon/fasla-ui@latest add navbar

Run init once per project before adding components. See Installation.

Preview

Components

  • Navbar: Main container
  • NavbarBrand: Logo/brand area
  • NavbarContent: Content sections
  • NavbarMenu: Navigation menu
  • NavbarLink: Navigation links
  • NavbarItem: Generic navbar items
  • NavbarToggle: Mobile menu toggle

Props

PropTypeDefaultDescription
stickybooleantrueSticks to the top on scroll.
borderedbooleantrueShows the bottom border.
childrenReactNode—The navbar’s parts.
NavbarContent{ align: "start" | "center" | "end" }—A section aligned to the start, centre or end.
classNamestring—Extra classes for the component.

Usage

tsx
"use client"

import { useState } from "react"
import { Navbar, NavbarBrand, NavbarContent, NavbarMenu, NavbarLink, NavbarToggle } from "@/components/blocks/navbar"

const links = [
  { label: "Home", href: "/" },
  { label: "Products", href: "/products" },
  { label: "Orders", href: "/orders" },
]

export function SiteNavbar() {
  const [open, setOpen] = useState(false)

  return (
    <header>
      <Navbar>
        <NavbarBrand>
          <span className="font-semibold">My store</span>
        </NavbarBrand>
        <NavbarContent align="end">
          <NavbarMenu mobileMenu>
            {links.map((link, index) => (
              <NavbarLink key={link.href} href={link.href} active={index === 0}>
                {link.label}
              </NavbarLink>
            ))}
          </NavbarMenu>
          <NavbarToggle
            open={open}
            onClick={() => setOpen(!open)}
            aria-label={open ? "Close menu" : "Open menu"}
            aria-controls="mobile-menu"
          />
        </NavbarContent>
      </Navbar>
      {open && (
        <nav id="mobile-menu" className="flex flex-col gap-3 border-b bg-background p-4 md:hidden">
          {links.map((link, index) => (
            <NavbarLink key={link.href} href={link.href} active={index === 0}>
              {link.label}
            </NavbarLink>
          ))}
        </nav>
      )}
    </header>
  )
}