Navbar

Responsive navigation bar with brand, links, actions, search, mobile menu with groups and CTA, and sticky auto-hide. Supports default, minimal, transparent, and bordered variants.

Import

import {
  Navbar, NavbarTopBar, NavbarMain, NavbarBrand,
  NavbarLinks, NavbarLink, NavbarDropdown,
  NavbarMegaMenu, NavbarMegaMenuItem,
  NavbarActions, NavbarMobileToggle,
  NavbarMobileMenu, NavbarMobileLink,
  NavbarMobileGroup, NavbarMobileActions,
  NavbarSearch, NavbarDivider,
} from "poyraz-ui/organisms";

Default

Standard navbar with brand, links, search, divider and action buttons.

<Navbar>
  <NavbarMain>
    <NavbarBrand>
      <Logo width={28} height={28} />
    </NavbarBrand>
    <NavbarLinks>
      <NavbarLink href="#">Home</NavbarLink>
      <NavbarLink href="#">Components</NavbarLink>
      <NavbarLink href="#">Docs</NavbarLink>
    </NavbarLinks>
    <NavbarDivider />
    <NavbarActions>
      <Button variant="outline" size="sm">Sign In</Button>
      <Button size="sm">Get Started</Button>
    </NavbarActions>
    <NavbarMobileToggle />
  </NavbarMain>
  <NavbarMobileMenu>
    <NavbarMobileGroup label="Navigation">
      <NavbarMobileLink href="#" active>Home</NavbarMobileLink>
      <NavbarMobileLink href="#">Components</NavbarMobileLink>
      <NavbarMobileLink href="#">Docs</NavbarMobileLink>
    </NavbarMobileGroup>
    <NavbarMobileActions>
      <Button variant="outline" className="w-full">Sign In</Button>
      <Button className="w-full">Get Started</Button>
    </NavbarMobileActions>
  </NavbarMobileMenu>
</Navbar>

With Top Bar

Navbar with an announcement top bar and full mobile menu with grouped links.

<Navbar>
  <NavbarTopBar>
    <span className="text-xs">🎉 v1.0 is live — check the changelog!</span>
    <a href="#" className="text-xs underline">Learn more →</a>
  </NavbarTopBar>
  <NavbarMain>
    <NavbarBrand>
      <Logo width={28} height={28} />
    </NavbarBrand>
    <NavbarLinks>
      <NavbarLink href="#">Features</NavbarLink>
      <NavbarLink href="#">Pricing</NavbarLink>
      <NavbarLink href="#">Blog</NavbarLink>
    </NavbarLinks>
    <NavbarActions>
      <Button size="sm">Sign Up</Button>
    </NavbarActions>
    <NavbarMobileToggle />
  </NavbarMain>
  <NavbarMobileMenu>
    <NavbarMobileGroup label="Product">
      <NavbarMobileLink href="#">Features</NavbarMobileLink>
      <NavbarMobileLink href="#">Pricing</NavbarMobileLink>
    </NavbarMobileGroup>
    <NavbarMobileGroup label="Resources">
      <NavbarMobileLink href="#">Blog</NavbarMobileLink>
      <NavbarMobileLink href="#">Changelog</NavbarMobileLink>
    </NavbarMobileGroup>
    <NavbarMobileActions>
      <Button className="w-full">Sign Up</Button>
    </NavbarMobileActions>
  </NavbarMobileMenu>
</Navbar>

Bordered Variant

Navbar with prominent dashed borders — a boxed, brutalist feel.

<Navbar variant="bordered">
  <NavbarMain>
    <NavbarBrand>
      <Logo width={28} height={28} />
    </NavbarBrand>
    <NavbarLinks>
      <NavbarLink href="#">Work</NavbarLink>
      <NavbarLink href="#">About</NavbarLink>
      <NavbarLink href="#">Contact</NavbarLink>
    </NavbarLinks>
    <NavbarActions>
      <Button variant="outline" size="sm">Let's Talk</Button>
    </NavbarActions>
    <NavbarMobileToggle />
  </NavbarMain>
  <NavbarMobileMenu>
    <NavbarMobileLink href="#">Work</NavbarMobileLink>
    <NavbarMobileLink href="#">About</NavbarMobileLink>
    <NavbarMobileLink href="#">Contact</NavbarMobileLink>
  </NavbarMobileMenu>
</Navbar>

Dropdown — Full Layout

Links spread across 4 columns using layout='full'. Items fill the entire dropdown width.

<NavbarDropdown label="Products">
  <NavbarMegaMenu layout="full">
    <NavbarMegaMenuItem href="#" title="Analytics"
      description="Real-time dashboards" />
    <NavbarMegaMenuItem href="#" title="Automation"
      description="Workflow tools" />
    <NavbarMegaMenuItem href="#" title="Integrations"
      description="Connect everything" />
    <NavbarMegaMenuItem href="#" title="API"
      description="Build custom solutions" />
  </NavbarMegaMenu>
</NavbarDropdown>

Dropdown — Columns Layout

Two-column link list on the left, compact and organized. Use layout='columns'.

<NavbarDropdown label="Resources">
  <NavbarMegaMenu layout="columns">
    <NavbarMegaMenuItem href="#" title="Documentation"
      description="Guides and references" />
    <NavbarMegaMenuItem href="#" title="Tutorials"
      description="Step-by-step walkthroughs" />
    <NavbarMegaMenuItem href="#" title="Blog"
      description="Latest updates" />
    <NavbarMegaMenuItem href="#" title="Changelog"
      description="What's new" />
  </NavbarMegaMenu>
</NavbarDropdown>

Dropdown — Featured Layout

Links on the left, featured card/content on the right. Use layout='featured' with NavbarMegaMenuLinks and NavbarMegaMenuFeatured.

<NavbarDropdown label="Products">
  <NavbarMegaMenu layout="featured">
    <NavbarMegaMenuLinks>
      <NavbarMegaMenuItem href="#" title="Analytics"
        description="Real-time dashboards" />
      <NavbarMegaMenuItem href="#" title="Automation"
        description="Workflow tools" />
      <NavbarMegaMenuItem href="#" title="Integrations"
        description="Connect everything" />
      <NavbarMegaMenuItem href="#" title="API"
        description="Build custom solutions" />
    </NavbarMegaMenuLinks>
    <NavbarMegaMenuFeatured>
      <p className="text-xs font-bold uppercase tracking-wide text-slate-400 mb-2">
        What's New
      </p>
      <p className="text-sm font-medium">v2.0 Released</p>
      <p className="text-xs text-slate-500 mt-1">
        New dashboard, faster builds, and more.
      </p>
      <Button size="sm" className="mt-3">Learn More</Button>
    </NavbarMegaMenuFeatured>
  </NavbarMegaMenu>
</NavbarDropdown>

Dropdown — List Layout

Simple single-column list for minimal dropdowns. Use layout='list'.

<NavbarDropdown label="More">
  <NavbarMegaMenu layout="list">
    <NavbarMegaMenuItem href="#" title="Help Center" />
    <NavbarMegaMenuItem href="#" title="Community" />
    <NavbarMegaMenuItem href="#" title="Status" />
    <NavbarMegaMenuItem href="#" title="Contact" />
  </NavbarMegaMenu>
</NavbarDropdown>

Transparent Variant

Transparent background, ideal for overlaying hero sections.

<Navbar variant="transparent">
  <NavbarMain>
    <NavbarBrand>
      <Logo width={28} height={28} />
    </NavbarBrand>
    <NavbarLinks>
      <NavbarLink href="#">Home</NavbarLink>
      <NavbarLink href="#">About</NavbarLink>
    </NavbarLinks>
  </NavbarMain>
</Navbar>

Minimal

Clean, stripped-down navbar with just brand and links.

<Navbar variant="minimal">
  <NavbarMain>
    <NavbarBrand href="#">
      <Logo width={24} height={24} />
    </NavbarBrand>
    <NavbarLinks>
      <NavbarLink href="#">Docs</NavbarLink>
      <NavbarLink href="#">GitHub</NavbarLink>
    </NavbarLinks>
  </NavbarMain>
</Navbar>

Navigation Config Pattern

Create a centralized navigation.ts file to manage all links in one place. Navbar, Sidebar, and Footer all read from the same config.

Place your navigation config in lib/navigation.ts

mainNav — Top-level links rendered by Navbar
mobileNav — Links for the mobile slide-in panel
footerNav — Grouped sections for Footer
componentRegistry — Sidebar component groups with basePath
socialLinks — Centralized social/external URLs

// lib/navigation.ts
export interface NavItem {
  label: string;
  href: string;
  external?: boolean;
  children?: NavItem[];
}

export interface FooterSection {
  heading: string;
  links: NavItem[];
}

export interface ComponentGroup {
  label: string;
  basePath: string;
  items: string[];
}

export const mainNav: NavItem[] = [
  { label: "Docs", href: "/docs" },
  { label: "Components", href: "/docs/atoms" },
  { label: "GitHub", href: "https://github.com/...", external: true },
];

export const footerNav: FooterSection[] = [
  {
    heading: "Documentation",
    links: [
      { label: "Getting Started", href: "/docs" },
      { label: "Installation", href: "/docs/installation" },
    ],
  },
];

export const componentRegistry: ComponentGroup[] = [
  {
    label: "Atoms",
    basePath: "/docs/atoms",
    items: ["Button", "Input", "Badge"],
  },
];

// Usage in page.tsx
import { mainNav } from "@/lib/navigation";

<NavbarLinks>
  {mainNav.map((item) => (
    <NavbarLink
      key={item.href}
      href={item.href}
      {...(item.external ? { target: "_blank" } : {})}
    >
      {item.label}
    </NavbarLink>
  ))}
</NavbarLinks>