Navigation Bar
Page-level navigation header. Logo, primary nav, optional actions, optional account menu.
components/navigation-bar/recipe.jsonWhen to use Navigation bar
Use the navigation bar for top-level page navigation. One per application; appears at the top of every page.
The recipe ships a horizontal layout with logo + primary nav + optional actions area. Mobile collapse (hamburger drawer pattern) is subsequent-milestone work.
Mark the active page with aria-current="page".
Important Information
Design System disclosure
This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.