Curate Navigation That Reflects Your Design System Structure
With Custom Top Bar Navigation, UI Vault allows you to configure your style guide’s primary navigation to match your team’s structure, flow, and priorities. Add links to core pages, external documentation, internal tools, or collections—all branded and organized to guide your audience with intention. Whether you want a link to your Figma library, GitHub repo, product docs, or brand site, your top bar becomes the command center of your design system.
The Benefits
Unlock the full benefits of this feature.
01
Fully Configurable Links
Link internal pages, specific collections, or external resources like GitHub, Figma, Notion, or Help Centers—your navigation, your ecosystem.
02
Custom Labels, Order, and Grouping
Control label text, order, hierarchy, and layout, making it easy for contributors and stakeholders to find exactly what they need.
03
Brand-Aligned Top Bar Design
Navigation seamlessly matches your custom branding, colors, and typography, giving your style guide a polished and consistent look.
The Impact
From Static Docs to Smart Design Hubs
Custom Top Bar Navigation transforms your style guide into a fully branded, structured command center—not just a reference, but a destination.
Common Use Cases
Designers
Link directly to live Figma files, component libraries, or artboards—navigation becomes an extension of your workflow.
Developers
Add links to repos, token APIs, implementation guides, or Storybook instances—making dev handoff seamless.
Product Managers
Guide stakeholders to campaign libraries, product principles, or roadmap decks—all from a central, branded nav bar.
Enterprises
Maintain navigation standards across dozens of guides, with top bars that reflect internal architecture and global governance.
Why UI Vault?
Because great documentation deserves great wayfinding. Custom Top Bar Navigation gives you clarity, flexibility, and authority over how your system is experienced.
Link to Anything
Internal collections, brand assets, external tools—you decide what lives in your top nav.
Drag-and-Drop Editor
Consistent Across Guides or Per-Guide Control
Standardize navigation globally, or customize for each brand, product, or team.
Responsive and Accessible
Built with accessibility and mobile-friendliness in mind—everyone can find what they need on any device.