Layout

TopNav

Horizontal navigation with left/center/right slots. Compose with TopNavLogo, TopNavLogoMark (brand tile), TopNavBreadcrumb, TopNavMenu, and TopNavLink. Links support active and external states.

view .md

Preview

page content

Installation

terminal

bash

npx @entrepta/cli@latest add top-nav

Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

top-nav.tsx

tsx

import {
  TopNav, TopNavLogo, TopNavLogoMark,
  TopNavBreadcrumb, TopNavSeparator,
  TopNavMenu, TopNavLink,
} from "@/components/entrepta/top-nav"

<TopNav
  left={
    <>
      <TopNavLogo>
        <TopNavLogoMark>e</TopNavLogoMark>
        entrepta
      </TopNavLogo>
      <TopNavBreadcrumb>
        <TopNavSeparator />
        <span>docs</span>
        <TopNavSeparator />
        <span className="here">button</span>
      </TopNavBreadcrumb>
    </>
  }
  right={
    <TopNavMenu>
      <TopNavLink href="/" active>home</TopNavLink>
      <TopNavLink href="/docs">docs</TopNavLink>
      <TopNavLink href="https://github.com" external>github</TopNavLink>
    </TopNavMenu>
  }
/>

Props

Prop	Type	Default	Description
left	ReactNode	-	Left slot. Logo and breadcrumb.
center	ReactNode	-	Centered slot. Hidden on mobile.
right	ReactNode	-	Right slot. Actions and menu.