Components

Anchor

In-page navigation that links to the sections of a long page and marks the one being read.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Anchor } from '@bigbang/ui';
Source: Anchor.tsx
Storybook: Anchor · Playground

Anchor is in the @bigbang/ui package.

import { Anchor } from '@bigbang/ui';

<Anchor items={[{ id: 'overview', label: 'Overview' }, { id: 'fees', label: 'Fees', items: [{ id: 'commission', label: 'Commission' }] }]} />;

Props

itemsRequired

Description: Sections of the page, in order.
Type: readonly AnchorItem[]

label

Description: Name of the navigation, shown above the links. Without it, ui.anchor.label ("Bu sayfada" or "On this page").
Type: string

hideLabel

Description: Hides the visible title; the navigation keeps its name.
Type: boolean
Default: false

current

Description: Controlled current section id. Without it, the section nearest the top of the viewport is marked.
Type: string

onCurrentChange

Description: Called when the current section changes while scrolling.
Type: (id: string) => void

className

Description: Added to the root element; use it for layout only.
Type: string

Data attributes

data-component="anchor": on the root.
data-part: title, link.