Page Nav

Full-width sub-navigation row for page chrome, placed below breadcrumbs and outside PageHeader.

'use client'
 
import { useState } from 'react'
import { NavMenu, NavMenuItem } from 'ui'
import { PageNav } from 'ui-patterns/PageNav'
 
const pages = [
  { id: 'overview', label: 'Overview' },
  { id: 'logs', label: 'Logs' },
  { id: 'settings', label: 'Settings' },
] as const
 
export function PageNavDemo() {
  const [activePage, setActivePage] = useState<(typeof pages)[number]['id']>('overview')
 
  return (
    <div className="w-full">
      <PageNav>
        <NavMenu>
          {pages.map((page) => (
            <NavMenuItem key={page.id} active={activePage === page.id}>
              <button
                type="button"
                aria-pressed={activePage === page.id}
                className="h-full cursor-pointer appearance-none bg-transparent text-inherit"
                onClick={() => setActivePage(page.id)}
              >
                {page.label}
              </button>
            </NavMenuItem>
          ))}
        </NavMenu>
      </PageNav>
    </div>
  )
}

Usage

import { NavMenu, NavMenuItem } from 'ui'
import { PageNav } from 'ui-patterns/PageNav'

<PageNav>
  <NavMenu>
    <NavMenuItem active>Overview</NavMenuItem>
    <NavMenuItem>Logs</NavMenuItem>
  </NavMenu>
</PageNav>

Sub-components

PageNav — bordered, full-width container for NavMenu tab navigation

PageNav uses PageContainer with size="full" for width and padding. It does not depend on PageHeader.

Place it directly below PageBreadcrumbs and outside PageHeader. For legacy pages, PageHeaderNavigationTabs remains available on PageHeader.

PreviousPage Breadcrumbs

NextPage Header