v0.9.4defuss-shadcn
Theme

defuss-shadcn / Website / Docs & Help / docs-navigation

Built with: CSS

Docs NavigationBLK

Organizes documentation links into a navigable hierarchy - a version switch, sections, collapsible groups, nested pages and the current page marked. Part of the Docs & Help blocks.

On this page (3)
Component Skill — components/docs-navigation/component-skill.md

Native basis

A <nav aria-label="Documentation">: a version Select, section headings, nested <ul>s, collapsible groups as <details> and aria-current="page" on the current link.

Built from

Select, Badge.

Web Platform APIs

<nav><details>aria-current

Classes

.mk-docs-navigation.mk-docs-navigation-top.mk-docs-navigation-heading

Data attributes

data-variant="bordered".

§Default

A version Select, headings, nested lists, groups as <details> (collapse without script) and the current page as a filled pill (aria-current="page").

§Bordered

data-variant='bordered': a rail along the edge - the current page lights it in the primary color.

§CSS view file

/* -- Docs Navigation (website · Docs & Help) ------------------------------
   Organizes documentation links into a navigable hierarchy - a version switch, sections, collapsible groups, nested pages and the current page marked. */
@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-docs-navigation, .mk-docs-navigation *, .mk-docs-navigation ::before, .mk-docs-navigation ::after) { box-sizing: border-box; }
  .mk-docs-navigation {
    display: grid;
    align-content: start;
    gap: 0.25rem;
    width: 100%;
    max-width: 16rem;
    font-size: 0.875rem;
    & ul { display: grid; gap: 0.0625rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
    & ul ul { margin: 0.125rem 0 0.25rem 0.75rem; padding-inline-start: 0.75rem; border-inline-start: 1px solid var(--border); }
    & a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.625rem; border-radius: var(--radius-md); color: var(--muted-foreground); text-decoration: none; }
    & a:hover { background: var(--accent); color: var(--accent-foreground); }
    & a:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
    & a[aria-current] { background: var(--accent); color: var(--foreground); font-weight: 600; }
    & details > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
    & details > summary::-webkit-details-marker { display: none; }
    & details > summary::after { content: ""; width: 0.375rem; height: 0.375rem; margin-inline-end: 0.375rem; border-block-end: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor; rotate: -45deg; transition: rotate 150ms ease; }
    & details[open] > summary::after { rotate: 45deg; }
    & summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
  }
  .mk-docs-navigation-top { margin-block-end: 0.75rem; }
  .mk-docs-navigation-heading { margin: 0; padding: 0.375rem 0.625rem; color: var(--foreground); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
  .mk-docs-navigation[data-variant="bordered"] {
    & > ul, & details > ul { margin-inline-start: 0.625rem; border-inline-start: 1px solid var(--border); }
    & a { margin-inline-start: -1px; border-inline-start: 2px solid transparent; border-radius: 0; }
    & a:hover { background: transparent; border-inline-start-color: var(--muted-foreground); }
    & a[aria-current] { background: transparent; color: var(--primary); border-inline-start-color: var(--primary); }
  }
  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-docs-navigation details > summary::after { transition: none; }
  }
  @media (forced-colors: active) {
    .mk-docs-navigation a[aria-current] { outline: 1px solid Highlight; }
  }
}

Comments, ideas or improvements? Edit this page's source on GitHub