Density

PageTabs

PageTabs is a native button wrapper for document-style page tab strips. Use it for editor buffers, terminal pages, and other tab rows that navigate between pages without owning panels.

import { PageTabs } from "density-base-ui";
import { useState } from "react";

const items = [
  { id: "overview", label: "Overview" },
  { id: "roadmap", label: "Roadmap" },
  { id: "activity", label: "Activity" },
];

export default function PageTabsExample() {
  const [activeId, setActiveId] = useState("overview");

  return (
    <PageTabs
      activeId={activeId}
      aria-label="Project pages"
      items={items}
      onActiveIdChange={setActiveId}
    />
  );
}

Props

Prop Attribute Values Default
items None { id, label, disabled? }[] Required
activeId None string Required
onActiveIdChange None (id) => void None
depth data-dn-depth 1, 2, 3, 4, 5, 6, 7 1
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
Other native div props Mixed HTMLAttributes<HTMLDivElement> None

Depth

import { PageTabs } from "density-base-ui";

const items = [
  { id: "one", label: "Page" },
  { id: "two", label: "Settings" },
];

export default function PageTabsDepthExample() {
  return (
    <div style={styles.stack}>
      <PageTabs
        activeId="one"
        aria-label="Depth 1 tabs"
        depth="1"
        items={items}
      />
      <PageTabs
        activeId="one"
        aria-label="Depth 2 tabs"
        depth="2"
        items={items}
      />
      <PageTabs
        activeId="one"
        aria-label="Depth 3 tabs"
        depth="3"
        items={items}
      />
      <PageTabs
        activeId="one"
        aria-label="Depth 4 tabs"
        depth="4"
        items={items}
      />
      <PageTabs
        activeId="one"
        aria-label="Depth 5 tabs"
        depth="5"
        items={items}
      />
      <PageTabs
        activeId="one"
        aria-label="Depth 6 tabs"
        depth="6"
        items={items}
      />
      <PageTabs
        activeId="one"
        aria-label="Depth 7 tabs"
        depth="7"
        items={items}
      />
    </div>
  );
}

const styles = {
  stack: { display: "grid", gap: "0.75rem", width: "100%" },
} as const;

Size

import { PageTabs } from "density-base-ui";

const items = [
  { id: "one", label: "Page" },
  { id: "two", label: "Settings" },
];

export default function PageTabsSizeExample() {
  return (
    <div style={styles.stack}>
      <PageTabs activeId="one" aria-label="2xs tabs" items={items} size="2xs" />
      <PageTabs activeId="one" aria-label="xs tabs" items={items} size="xs" />
      <PageTabs activeId="one" aria-label="sm tabs" items={items} size="sm" />
      <PageTabs activeId="one" aria-label="md tabs" items={items} size="md" />
      <PageTabs activeId="one" aria-label="lg tabs" items={items} size="lg" />
      <PageTabs activeId="one" aria-label="xl tabs" items={items} size="xl" />
      <PageTabs activeId="one" aria-label="2xl tabs" items={items} size="2xl" />
      <PageTabs activeId="one" aria-label="3xl tabs" items={items} size="3xl" />
    </div>
  );
}

const styles = {
  stack: { display: "grid", gap: "0.75rem", width: "100%" },
} as const;