Skip to content
+

Anchor Link Menu

The Open UI Kit Anchor Link Menu provides compact in-page navigation for long documentation pages, settings views, and product surfaces with multiple sections.

Introduction

Anchor Link Menu lists the sections available on the current page and highlights the active item. Use it as a quiet table of contents beside dense content, or as a floating navigation surface inside constrained product layouts.

The component is intentionally controlled: pass selectedId to mark the current section and onSelect to react when a user chooses an item.

On this page
Setup

Connect the required services, choose the defaults for this workspace, and review the options before moving to permissions.

Import

import { AnchorLinkMenu } from '@open-ui-kit/core';

Variants

Use variant="rail" when the menu sits in a fixed page column. Use variant="floating" when the menu needs its own contained surface.

Rail
Floating
Contents

Subsections

Set subsection on an item to indent it under the previous section. This keeps the hierarchy readable without adding collapsible behavior.

Contents

Controlled selection

AnchorLinkMenu does not manage the active section internally. Store the selected item in your page state, update it from scroll position or user selection, and pass it back through selectedId.

Settings
Workspace details

Selecting a row updates local state. In a real page, the same state can come from scroll tracking, route hashes, or a parent layout.

Props

Prop Type Default Description
items AnchorLinkMenuItem[] - Ordered list of sections shown in the menu.
selectedId string - ID of the active item.
title string - Optional heading displayed above the list.
variant 'rail' | 'floating' 'rail' Changes the menu container treatment.
onSelect (id: string) => void - Called when a menu item is selected.

Item shape

interface AnchorLinkMenuItem {
  id: string;
  label: string;
  subsection?: boolean;
}

Usage guidance

  • Keep labels short and match the destination section heading.
  • Use subsections sparingly so the menu stays scannable.
  • Keep selectedId in sync with scroll position on long pages.
  • Prefer the rail variant for page-level documentation and the floating variant for dashboards, drawers, or contextual panels.