COMPONENTS

Dropdowns

One dropdown class turns a native popover list into a standalone set of links or actions. Use it beside a button, outside the top navigation, with inherited theme styling and no JavaScript.

Usage

Markup: ul.dropdown[popover=auto] > li > a or button

Behaviour: Native outside-click/Escape dismissal; ordinary Tab navigation, not an ARIA menu. Actions and in-page links do not automatically dismiss.

Use a native button with type="button" and popovertarget matching the list’s unique document-wide id. Keep popover="auto" for outside-click and Escape dismissal; another unrelated auto popover closes the current one.
Keep ordinary list, link and button semantics. role="list" preserves list semantics when markers are removed. Do not add role="menu", role="menuitem", aria-haspopup="menu" or fixed aria-expanded: this pattern uses ordinary Tab navigation, not application-menu arrow keys.
The opener’s native association anchors the panel where CSS anchor positioning is supported. No wrapper or anchor-name is required. Panels can flip at viewport edges; otherwise they use a viewport-bounded centred fallback. Native popover support is required.
Panels inherit theme, shape, density, border and depth through their DOM parent, even in the top layer. Keep the panel inside the configured parent or .reva boundary. Shared size affects rows once; rows remain neutral rather than adopting filled button variants or animated edges.
Tab and Shift+Tab move through ordinary controls. Enter/Space activate buttons; Escape dismisses. Default opening and focus restoration follow native browser behaviour. An optional autofocus close button explicitly places focus inside on opening. Do not use this pattern as a modal dialog.
Destination links navigate normally. In-page links and arbitrary action buttons do not automatically dismiss the panel; an explicit popovertargetaction="hide" button can close it. Applications supply business actions; CSS adds no event handlers.
The complete, scoped and components builds include the dropdown. Modular use: tokens, base and reva.dropdowns.css; glass requires the matching optional extension. --re-dropdown-width defaults to 18rem and remains viewport-bounded. Open dropdowns are omitted from print.

Component API and styling module · Inherited appearance settings

A standalone link dropdown

One class on the list, one unique id, and native button targeting. Use the documentation links as real destinations.

<button type="button" popovertarget="resource-dropdown">Resources</button>
<ul class="dropdown" id="resource-dropdown" popover="auto"
    role="list" aria-label="Resources">
  <li><a href="/RevaCSS/guide/">Get started</a></li>
  <li><a href="/RevaCSS/reference/">API reference</a></li>
  <li><a href="/RevaCSS/icons/">SVG icons</a></li>
</ul>

Explicit close and unavailable actions

The close button is functional and receives focus on opening. The disabled action remains unavailable through native HTML.

<button type="button" popovertarget="project-dropdown">Project options</button>
<ul class="dropdown" id="project-dropdown" popover="auto"
    role="list" aria-label="Project options">
  <li><button type="button" popovertarget="project-dropdown"
              popovertargetaction="hide" autofocus>Close options</button></li>
  <li><a href="/RevaCSS/components/card-patterns/">View card patterns</a></li>
  <li><button type="button" disabled>Archive project — unavailable</button></li>
</ul>

Light and dark parent defaults

Theme, shape and size live on the containing section; neither dropdown needs repeated styling attributes.

<section data-theme="light" data-shape="rounded" data-size="small">
  <button type="button" popovertarget="light-dropdown">Light resources</button>
  <ul class="dropdown" id="light-dropdown" popover="auto"
      role="list" aria-label="Light resources">
    <li><a href="/RevaCSS/themes/light/">Light theme guide</a></li>
    <li><a href="/RevaCSS/guide/styling/">Shared styling</a></li>
  </ul>
</section>
<section data-theme="dark" data-shape="subtle" data-size="large">
  <button type="button" popovertarget="dark-dropdown">Dark resources</button>
  <ul class="dropdown" id="dark-dropdown" popover="auto"
      role="list" aria-label="Dark resources">
    <li><a href="/RevaCSS/themes/dark/">Dark theme guide</a></li>
    <li><a href="/RevaCSS/reference/tokens/">CSS tokens</a></li>
  </ul>
</section>

Glass and a local solid boundary

The optional glass extension follows the parent material. A solid section resets the second panel without repeating settings on its rows.

<section data-material="glass" data-shape="rounded" data-accent="teal">
  <button type="button" popovertarget="glass-dropdown">Glass resources</button>
  <ul class="dropdown" id="glass-dropdown" popover="auto"
      role="list" aria-label="Glass resources">
    <li><button type="button" popovertarget="glass-dropdown"
                popovertargetaction="hide" autofocus>Close resources</button></li>
    <li><a href="/RevaCSS/themes/glass/">Glass material guide</a></li>
    <li><a href="/RevaCSS/reference/">API reference</a></li>
  </ul>
  <section data-material="solid">
    <button type="button" popovertarget="solid-dropdown">Solid resources</button>
    <ul class="dropdown" id="solid-dropdown" popover="auto"
        role="list" aria-label="Solid resources">
      <li><a href="/RevaCSS/guide/">Get started</a></li>
      <li><a href="/RevaCSS/guide/accessibility/">Behaviour and accessibility</a></li>
    </ul>
  </section>
</section>