Bookmark Component

Tab-switching utility with directional placement, layout structures, shape profiles, dynamic colors, and size presets. Selected item uses data-selected="true" or a nested <input type="radio" checked>.

Notes

Requires .bookmark base class on the container.
Mark selected item with data-selected="true" or nested <input type="radio" checked>.
Layouts: bookmark-flex, bookmark-grid, bookmark-gapped, bookmark-flush.
Directions: bookmark-top, bookmark-start, bookmark-end (default: bottom).
Shapes: bookmark-rounded, bookmark-fluid, bookmark-pill.
Dark variant: add bookmark-inverted for solid fill on selected item.
Sizes: bookmark-4 ~ bookmark-15 (bookmark-8 is default).
Custom color via Tailwind palette: bookmark-green-500, or raw: bookmark-[#ff0000].
Disabled item: add data-placeholder="true" to a child.

Default & selection

Home Products Services About

Home Products Services

Layouts

Default (inline)

ABC

bookmark-flex (fluid + gaps)

ABC

bookmark-grid (equal width)

ABC

bookmark-gapped (track background + gaps)

ABC

Content area

bookmark-flush (seamless edge)

ABC

Content area

Directions

Default (bottom)

bookmark-top

bookmark-start (vertical)

ABC

bookmark-end (vertical)

ABC

Shapes

Default (square)

ABC

bookmark-rounded

ABC

bookmark-fluid

ABC

bookmark-pill (pill)

ABC

Dark variant (bookmark-inverted)

Default + inverted

HomeProductsServices

Flex + inverted

HomeProducts

Grid + inverted

HomeProducts

Gapped + inverted

ABC

Content

Flush + inverted

ABC

Content

Colors — default style

primaryitem secondaryitem tertiaryitem successitem erroritem infoitem warningitem cautionitem highlightitem inkitem titleitem descitem captionitem disableditem

Colors — inverted (dark) style

primaryitem secondaryitem tertiaryitem successitem erroritem infoitem warningitem cautionitem highlightitem inkitem titleitem descitem captionitem disableditem

Custom colors

Multiple color formats are supported:

1. Theme semantic colors, e.g. *-error, *-error-hover
2. Tailwind built-in colors, e.g. *-indigo-500
3. Raw color values, e.g. *-[#ff0000]
4. CSS named colors, e.g. *-[red], *-[green]

green-500item green-100item green-800item [#ff0000]item inv greenitem inv reditem

Sizes (bookmark-4 ~ bookmark-15)

4item 5item 6item 7item 8item 9item 10item 11item 12item 13item 14item 15item

Use cases

Tab switch (default + rounded + color)

Favorites Files Team Settings

Nav menu (grid + inverted)

Home Products Services About

Sidebar (gapped + rounded)

Dashboard Analytics Users Settings

Content area

Status toggle (success / highlight)

PassPendingFail WarningInfoError

Flush + circle + inverted

Home Products Services About

Content area