For situations where the <auro-dropdown> web component cannot be used, a native HTML <details>/<summary> element can be styled with the Auro Design System tokens to approximate the visual appearance of auro-dropdown. Unlike auro-hyperlink, Web Core Style Sheets does not provide a prebuilt .dropdown class, so the styling must be authored manually using Auro design tokens.

The native <details>/<summary> pair can be reset and restyled with the Auro design tokens published by @aurodesignsystem/design-tokens. The pattern below replicates the trigger border, spacing, and panel colors used by auro-dropdown.

@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
​
.dropdown {
  position: relative;
  display: inline-block;
}
​
.dropdown > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-size-100, 0.5rem);
  padding: var(--ds-size-100, 0.5rem) var(--ds-size-150, 0.75rem);
  border: 1px solid var(--ds-color-border-ui-default, #6e767f);
  border-radius: var(--ds-border-radius, 4px);
  background-color: var(--ds-color-container-primary-default, #ffffff);
  color: var(--ds-color-text-primary-default, #1d1d1d);
  font-family: var(--ds-font-family-default, sans-serif);
}
​
.dropdown > summary::-webkit-details-marker {
  display: none;
}
​
.dropdown > summary::after {
  content: "";
  width: var(--ds-size-150, 0.75rem);
  height: var(--ds-size-150, 0.75rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 150ms ease;
}
​
.dropdown[open] > summary::after {
  transform: rotate(180deg);
}
​
.dropdown > summary:focus-visible {
  outline: 2px solid var(--ds-color-border-active-default, #01426a);
  outline-offset: 2px;
}
​
.dropdown-bib {
  position: absolute;
  top: calc(100% + var(--ds-size-50, 0.25rem));
  left: 0;
  z-index: 1;
  min-width: 100%;
  padding: var(--ds-size-100, 0.5rem);
  border: 1px solid var(--ds-color-border-ui-default, #6e767f);
  border-radius: var(--ds-border-radius, 4px);
  background-color: var(--ds-color-container-primary-default, #ffffff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

Apply the .dropdown class to a <details> element with a <summary> trigger and a panel container:

<details class="dropdown">
  <summary>More options</summary>
  <div class="dropdown-bib">
    <p>Panel content goes here.</p>
  </div>
</details>

The panel can hold any markup. For a menu-like list, author the items as a plain unordered list:

<details class="dropdown">
  <summary>Account</summary>
  <div class="dropdown-bib">
    <ul>
      <li><a href="/profile">Profile</a></li>
      <li><a href="/settings">Settings</a></li>
      <li><a href="/logout">Log out</a></li>
    </ul>
  </div>
</details>

While the CSS above replicates the visual styling of auro-dropdown, the following functionality built into the auro-dropdown web component is not available when using plain HTML:

auro-dropdown uses Floating UI to position the bib relative to the trigger and supports a placement attribute with twelve values (top, right, bottom, left, and their -start/-end variants). A native <details> panel is absolutely positioned by the author and does not adapt to alternate placements without additional CSS for each case.

auro-dropdown exposes autoPlacement and the inverse noFlip option so the bib can automatically pick the side of the trigger with the most available space and flip when it would otherwise be clipped by the viewport. A CSS-only panel stays where it is authored and will overflow the viewport when there is not enough room.

auro-dropdown supports a shift attribute that nudges the bib along its axis so it remains fully visible inside the viewport. Native disclosures have no equivalent — a panel positioned with CSS that runs past the viewport edge is simply clipped or causes horizontal scroll.

auro-dropdown exposes matchWidth to size the bib to the trigger and a numeric offset for the gap between trigger and bib. With native HTML, both must be implemented manually with CSS and, in the case of dynamic trigger widths, JavaScript measurement.

auro-dropdown supports a fullscreenBreakpoint (defaulting to sm) that switches the bib into a fullscreen presentation on small viewports, and a desktopModal option for modal behavior on larger viewports. Native <details> has no responsive presentation — the panel renders the same way on every screen size.

auro-dropdown supports a hoverToggle attribute that opens the bib on mouseover and closes it on mouseout. Native <details> only responds to click on the <summary>; hover-to-open requires custom JavaScript.

auro-dropdown provides a focus() method that moves focus to the first focusable element inside the bib when it is open, or to the trigger when it is closed. It also supports focusShow to open the bib on trigger focus. Native <details> leaves focus on the <summary> after toggle and offers no built-in focus-into-panel behavior.

auro-dropdown closes the bib when the user clicks outside the component or moves focus out of it, and exposes noHideOnThisFocusLoss to opt out. Native <details> stays open until the <summary> is clicked again — click-outside and focus-out dismissal must be wired up manually.

auro-dropdown includes a keyboard strategy for arrow-key navigation, Escape to close, and Tab behavior coordinated with the bib contents, and lets consumers opt out via disableKeyboardHandling. Native <details> only toggles on Enter/Space on the <summary> and offers no panel-internal keyboard model.

auro-dropdown sets an a11yRole on the trigger, manages aria-expanded, and emits an auroDropdown-idAdded event so consumers can wire aria-controls to the generated bib ID. Native <details> exposes a disclosure role with open state but does not expose a generated panel ID, and any custom role (for example, combobox or menu) must be added and kept in sync by hand.

auro-dropdown supports a chevron attribute that renders a collapsed/expanded indicator with the correct rotation and design-token color. With native HTML you must author the indicator yourself — the example above uses a background-image SVG and a [open] selector to rotate it.

auro-dropdown exposes error, errorMessage, and a helpText slot that renders supporting text below the trigger with the correct error styling. Native <details> has no concept of error state or help text — both must be authored and toggled manually.

auro-dropdown exposes show() and hide() methods, a disableEventShow option to lock it to programmatic control, and emits auroDropdown-toggled and auroDropdown-triggerClick events. Native <details> emits a single toggle event and is toggled by user interaction with the <summary>; coordinated open/close logic across components must be written by hand.

auro-dropdown consumes Auro design tokens through its component logic, so it automatically picks up brand-specific theming when token packages are swapped. A CSS-only disclosure is tied to whichever tokens were imported at author time and will not respond to runtime theme switching the way the web component does.

Use auro-dropdown whenever possible. Fall back to a CSS-styled native <details>/<summary> only in environments where custom elements are not supported or when integrating with third-party systems that require plain HTML — and be prepared to reimplement positioning, focus management, click-outside dismissal, keyboard behavior, and responsive presentation yourself.