Section nav | Arbol UI

Language

Appearance

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.

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.

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, which the library’s tests render too.