# MobileNav

> The app's navigation below 768px, where a Sidebar does not fit. Up to four destinations sit in reach of the thumb; the rest, and anything else you pass, go in a More sheet from the bottom, as a grid of icon tiles. The current one fills its icon and a ◆ travels along the top edge, to More when the page is inside it. It clears the home indicator on phones that have one. Name each destination in one short word: five share the width of a phone.

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

## Install

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

Files: `layout/mobile-nav.tsx`, `content/diamond.tsx`, `lib/overlay.ts`, `lib/icon.tsx`, `primitives/dialog.tsx`, `primitives/button.tsx`, `primitives/button-variants.ts`, `primitives/sheet.tsx`, `primitives/icon-tile.tsx`, `lib/motion.ts`, `lib/nav.ts`.
npm packages: `@phosphor-icons/react`, `@radix-ui/react-dialog`, `class-variance-authority`, `@radix-ui/react-slot`, `motion`.
Comes with: `diamond`, `overlay-lib`, `icon-lib`, `dialog`, `button`, `sheet`, `icon-tile`, `motion-lib`, `nav-lib`.

## Usage

```tsx
import { MobileNav } from "@/components/entrepta/mobile-nav"
import Link from "next/link"

<MobileNav
  items={ITEMS}
  active={current}
  linkComponent={Link}
  more={<SignOutButton />}
  className="md:hidden"
/>

// leave room for it at the bottom of the page
<main className="pb-[calc(56px+env(safe-area-inset-bottom))] md:pb-0">
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `{ id, label, href, icon }[]` | - | The first four go in the bar, the rest in More |
| `active` | `string` | - | Id of the current item |
| `more` | `ReactNode` | - | Extra content for the More sheet. More shows whenever there is some |
| `position` | `"fixed" \| "static"` | "fixed" | Fixed to the bottom of the viewport, or in the flow |
| `linkComponent` | `ElementType` | "a" | Your router's link |
| `labels` | `{ more? }` | - | The More button's word |
| `container` | `HTMLElement \| null` | - | Where the More sheet renders: a device frame in a preview |