Atoms
Five element types compose every dropdown shell. Each is its own component in src/components/nav/dropdowns/.
DropdownLinksLarge · 58:3620
Top-level page links at text-h4 in the display typeface, stacked with gap-2. Used as the lead group inside Wide dropdowns.
DropdownLinksSmall · 58:3641
Secondary link column with a faded category label on top, small body-typeface links below at gap-2.
DropdownLinkDetailed · 60:3900
Two-line link: title (text-primary) plus muted description. Used for Detailed link groups inside Wide and Medium dropdowns.
DropdownHoverBox · 60:4012
Card-link cell. The whole padded area is clickable and picks up a cream-100 fill on pointer hover; the optional active prop pins the hover state. First cell below is shown active; the second applies the fill on hover.
DropdownLinkBlock · 60:4204
Horizontal label plus optional version badge, used as list items inside Small dropdowns. Hovered or active rows pick up a cream-100 fill.
Shells
Three shell sizes hold the atoms above. Each example below shows one canonical composition; Planar ships several variants per shell, and any of the atoms can be slotted in. All three use bg-bg-card (white) with a hairline border.
DropdownSmall · 252px · 60:4158
Vertical list of Link Blocks. Compact menu for resources, information, account, etc.
DropdownMedium · 528px · 60:3952
2x2 grid of Hover Boxes. Medium-density menu for company, blog, contact links with a short description per item.
DropdownWide · 1080px · 58:3724
Lead Links Large group plus 2-3 Links Small columns, with a Box Layout module slot on the right. Full-bleed dropdown for top-level Pages or Company menus.
Notes
- Tokens used:
bg-bg-cardfor the white dropdown surface,bg-cream-100for hover and active states inside,bg-cream-200for the version badge background. Radii from the spine (rounded-mdfor Wide,rounded-xsfor Medium and Small). - Dropdown widths are fixed (252 / 528 / 1080) to match Planar's spec. At narrow viewports the demos scroll horizontally inside their wrapper.
- Hover behaviour: pure CSS transitions on individual links and Link Blocks. Hover-to-open on a nav link is not wired (and likely never needed for the Journey nav, which has three flat links).
- If the nav grows a sub-menu later, compose from these atoms inside a shell, anchor to the trigger link with absolute positioning, and add a small JS handler that toggles
hiddenon focus-within / pointer-enter.