# Whats new dropdown

Component documentation for Whats new dropdown — Overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.whats-new-dropdown.overview"
  source="components/dist/registries/dskit.json#whats-new-dropdown"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"whats-new-dropdown"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/whats-new-dropdown/preview.png" alt="" />

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the navigation region — typically a landmark role (nav/banner)"},{"name":"Items","description":"individual navigable entries; one is marked \"current\" when applicable"},{"name":"Item label","description":"short, scannable text; never sentence case"},{"name":"Item icon (optional)","description":"reinforces meaning at a glance; not a substitute for label"},{"name":"Active indicator","description":"visual treatment for the current item — underline, bar, fill, or background"},{"name":"Trigger (optional)","description":"opens a dropdown/menu for grouped or contextual items"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Property 1","values":["Drilldown1","Drilldown2","Empty","List"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"hover/focus transitions on items stay subtle — no large translation"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}},{"ref":{"ref":"anchor-motion","note":"dropdown triggers (account-dropdown, notification-dropdown, etc.) anchor to their button"},"pattern":{"slug":"anchor-motion","name":"The \"Anchor\" Motion — Dropdowns, Popovers, and Tooltips","phases":[{"Phase":"Open","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in"},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point"}],"logic_and_accessibility":["Intentionality: Apply --zen-motion-delay-intent (300ms) for Tooltip opening on hover to prevent accidental triggers","Immediate Focus: Keyboard focus (Tab) ignores delays and triggers the open motion immediately","Reduced Motion: When prefers-reduced-motion: reduce is detected, fade transitions are disabled and elements toggle visibility instantly"]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=9114-16794)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/whats-new-dropdown)