---
title: "Section nav"
description: "Tabs that are pages: a record’s or a settings area’s sections, each at its own URL, as a navigation of links whose thumb slides to the current one. On phones they wrap into balanced rows. Use Tabs for sections inside one page."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Section nav

## A record’s sections

The dot says a section needs attention. In an app the router follows each link and passes the section on screen as value; here a small router in memory does.

```tsx
import { useState } from 'react';
import { RouterProvider } from 'react-aria-components';
import { SectionNav } from '@arbol-ai/ui';
import type { SectionNavItem } from '@arbol-ai/ui';

const PROFESSIONAL: SectionNavItem[] = [
  { id: 'schedule', label: 'Schedule', href: '#/section-nav/schedule', attention: 'No schedule yet' },
  { id: 'services', label: 'Services', href: '#/section-nav/services' },
  { id: 'appointments', label: 'Appointments', href: '#/section-nav/appointments' },
  { id: 'profile', label: 'Profile', href: '#/section-nav/profile' },
];

const Sections = ({ items, label }: { items: SectionNavItem[]; label: string }) => {
  const [current, setCurrent] = useState(items[1]?.id ?? '');
  return (
    <RouterProvider
      navigate={(href) => {
        setCurrent(href.split('/').at(-1) ?? '');
      }}
    >
      <SectionNav items={items} label={label} value={current} />
    </RouterProvider>
  );
};

<Sections items={PROFESSIONAL} label="Professional sections" />
```

## Five sections

Narrow the window below 640px: a row of three, then a row of two.

```tsx
import { useState } from 'react';
import { RouterProvider } from 'react-aria-components';
import { SectionNav } from '@arbol-ai/ui';
import type { SectionNavItem } from '@arbol-ai/ui';

const BILLING: SectionNavItem[] = [
  { id: 'summary', label: 'Summary', href: '#/section-nav/summary' },
  { id: 'invoices', label: 'Invoices', href: '#/section-nav/invoices' },
  { id: 'payments', label: 'Payments', href: '#/section-nav/payments' },
  { id: 'movements', label: 'Movements', href: '#/section-nav/movements' },
  { id: 'profile', label: 'Billing profile', href: '#/section-nav/profile' },
];

const Sections = ({ items, label }: { items: SectionNavItem[]; label: string }) => {
  const [current, setCurrent] = useState(items[1]?.id ?? '');
  return (
    <RouterProvider
      navigate={(href) => {
        setCurrent(href.split('/').at(-1) ?? '');
      }}
    >
      <SectionNav items={items} label={label} value={current} />
    </RouterProvider>
  );
};

<Sections items={BILLING} label="Billing sections" />
```

## Source

The examples above are [`src/blocks/section-nav/section-nav.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/blocks/section-nav/section-nav.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/blocks/section-nav/index.mdx