# TopNav

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

Section: Layout. Docs: https://entrepta.vercel.app/docs/components/top-nav

## Install

```bash
npx @entrepta/cli@latest add top-nav
```

Files: `layout/top-nav.tsx`.
No npm packages.

## Usage

```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. |