PageTabs

PageTabs defines how EnterUI handles page-level navigation tabs, including route-friendly links, responsive overflow, and accessible tab semantics.

#Default usage

<PageTabs defaultValue="general">
  <PageTabsList>
    <PageTabsTrigger value="general" href="/docs/components/page-tabs">General</PageTabsTrigger>
    <PageTabsTrigger value="members" href="/docs/components/page-tabs">Members</PageTabsTrigger>
    <PageTabsTrigger value="billing" href="/docs/components/page-tabs">Billing</PageTabsTrigger>
  </PageTabsList>
  <PageTabsContent value="general">
    <Text tone="muted">General settings stay visible without changing the page structure.</Text>
  </PageTabsContent>
</PageTabs>

#Import

import {
  PageTabs,
  PageTabsContent,
  PageTabsList,
  PageTabsTrigger,
} from "@froggdesign/enter-ui-react";

#Controlled

Use value and onValueChange when tab state is owned by a route, search param, or parent workflow. Pass path to mark an href trigger active from the current route.

#Accessibility

PageTabs renders tablist, tab, and tabpanel roles. Arrow keys move focus within the tab list. Triggers can use href for URL-friendly navigation while keeping tab state explicit.

#API

• PageTabs: value, defaultValue, path, onValueChange, orientation.
• PageTabsList: label.
• PageTabsTrigger: value, href, disabled.
• PageTabsContent: value, forceMount.

#Styling

PageTabs uses .eui-page-tabs, .eui-page-tabs__list, .eui-page-tabs__trigger, and .eui-page-tabs__content. Active state is neutral-first with a small accent cue.