Navigation
Navigation components help users move through the application. Maintain consistency across all products.
Header
The primary header used on the marketing website. Blue background with white text.
Articulink
Header: bg-surf | Links: text-white/80 hover:text-white | Active: text-white | CTA: bg-sunshine text-abyssTab Navigation
Horizontal tabs for switching between views or content sections.
Underline Tabs
Pill Tabs
Underline: border-b-2 border-tide text-tide | Pill: bg-tide text-white rounded-lgMobile Menu
Hamburger menu with slide-out drawer for mobile navigation.
Menu Button
Drawer (Preview)
Menu
Pagination
Pagination controls for navigating through multi-page content.
...
Active: bg-tide text-white | Inactive: text-text-secondary hover:bg-bg-secondaryUsage Guidelines
Do
- Keep navigation consistent across pages
- Clearly indicate the active/current item
- Use recognizable icons with text labels
- Ensure mobile navigation is accessible
- Limit primary nav items to 5-7
Don't
- Hide important nav items in dropdowns
- Use inconsistent patterns across products
- Forget focus states for keyboard users
- Create deeply nested navigation
- Change nav position on scroll unexpectedly