Bookmark Tabs React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import BookmarkTabs from "./BookmarkTabs";

export default function Example() {
  return (
    <BookmarkTabs
      items={[
        {
          "value": "form",
          "label": "Form",
          "content": "Quiet shapes.\nConsidered from every angle."
        },
        {
          "value": "material",
          "label": "Material",
          "content": "Warm paper, brushed metal\nand a little imperfection."
        },
        {
          "value": "detail",
          "label": "Detail",
          "content": "Small decisions.\nLasting impressions."
        }
      ]}
      defaultValue={"form"}
      label={"Design notes"}
      color={"#caa682"}
      background={"#292421"}
    />
  );
}

Using Bookmark Tabs

Supply a unique value, a short label and your content for every item. Use value and onValueChange to keep tab selection in application state.

Arrow keys move between tabs, while Home and End select the first or last tab. Hidden panels stay mounted so form values and local child state are preserved.

Props

Name	Type	Required	Default	Description
items	Array<{ value, label, content }>	No	[]	Tabs with unique values, labels and panel content.
value	string	No	undefined	Controlled selected tab value.
defaultValue	string	No	undefined	Initial selected value, falling back to the first tab.
onValueChange	function	No	undefined	Receives the selected item value.
label	string	No	"Sections"	Accessible name for the tab list.
color	string	No	"#caa682"	Selected tab and panel edge colour.
background	string	No	"#292421"	Inactive tab and content panel colour.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.