Layout

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.

view .md

Preview

#home

Installation

terminal

bash

npx @entrepta/cli@latest add mobile-nav

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

Usage

mobile-nav.tsx

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