Figma application header navigation components | Untitled UI
Application header navigation in Figma: app bars, tabs, and account menus
How application header navigation differs from a marketing navbar, and why the two get confused.
An application header does a different job from the navbar on a marketing site, and the two get confused constantly because from a distance they look identical. A marketing header sells: logo, five or six destinations, a log in link, and one big call to action aimed at someone who has never used the product.
An app header orients somebody who is already inside, opens it forty times a day, and needs to know where they are before they care where they could go. These 5 components and 80 variants are built for the second case.
App header or marketing navbar
The differences are concrete. App headers carry the account menu, notifications, and search, because a signed-in user wants those on every screen rather than on the home page. They mark the current section hard, since orientation beats persuasion once someone has already bought.
They rarely need mega menus, because the destinations are a fixed set rather than a content library that grows every week. And they compete directly with the sidebar for the same job, so most products pick one to lead and let the other go quiet. If you are designing the public site instead, marketing header navigations are a separate set with dropdown and mega menu layouts built for that job.
Four types, 64px to 128px
Simple is a single 64px bar at 1,440px: logo, nav items, actions. Tabs is 108px, a bar with a row of section tabs sitting under it, which is the shape you want when a product has a handful of top-level areas and each of those has sub-areas of its own.
Dual-tier and centered both stand at 128px and use two rows, buying room for more sections without cramming them onto one line. Those heights matter more here than on a marketing page, because this bar appears on every screen in the product, from the dashboard down, and every pixel it takes is one the actual work does not get.
The current state is most of the point
The nav item base is 38px tall and ships with a Current property crossed against default, hover, and focused states, so the active section is a variant rather than a manual override someone applied to one instance at 6pm. That distinction stops mattering right up until the active treatment changes and you have to find every hand-styled copy.
Nielsen Norman Group's article on location cues makes the case that designers keep making these signals too subtle, because they already know the structure and the user does not. In code the same idea lands as aria-current on the active link, which the W3C's tutorial on menu structure covers along with why the bar wants a labelled nav landmark.
There is also a nav button with an icon-only variant, 36px square, for the search and notification buttons at the right end.
Mobile: 56px closed, 812px open
Every type has a mobile version at 375px, 56px tall closed and 812px with the menu open, which makes it a full-height panel rather than a small dropdown. Both states being in the file is the difference between a mobile spec and a mobile guess, and the open state is where app navigation usually falls apart, because the section list, the account menu, and search all want the same screen at once.
The file also carries the sidebar layouts, so you can put the two side by side and decide which one your product should lead with before committing. Everything is drawn twice, light and dark.
When the build starts, the same bars exist in code. Untitled UI React header navigations are open source, built with Tailwind CSS and React Aria, with keyboard-accessible menus and the mobile panel behavior handled for you.
FAQs
Frequently asked questions
Common questions about the Untitled UI Figma application header navigation components and their states.
Should an application use a header navigation or a sidebar?
Count the top-level destinations. Up to about six, a header keeps the full width free for content and reads fast. Beyond that, or when sections need sub-navigation and a workspace switcher, a sidebar scales better because it grows downwards.
Plenty of products run both, with the sidebar for structure and the header for account, search, and notifications.
What is the difference between an application header and a marketing header navigation?
Audience and job. A marketing navbar introduces a product to a stranger, so it leans on dropdowns, mega menus, and a conversion-focused call to action. An app header serves someone signed in, so it prioritises the current section, search, notifications, and the account menu.
Reusing one for the other is how apps end up with a Get started button that a paying customer sees daily.
How do I show which section a user is in?
Use the Current property on the nav item rather than restyling an instance. It gives you a designed active treatment across default, hover, and focused states, so the section stays marked while someone moves the mouse across the bar.
Make the treatment more obvious than feels necessary: designers underestimate this constantly, since they already know the structure.
Are these application header components included in the free version?
The application header navigations are part of the paid Untitled UI Figma kit. See pricing for the full contents.
The 100% free Figma UI kit includes core components from the same system if you want to try the foundations first.
Is there a React version of these application headers?
Yes. Untitled UI React header navigations are open source, built with Tailwind CSS and React Aria, and mirror these Figma components.
That includes the mobile open and closed states.
Figma UI components
Foundation Figma components and styles
Icons, styles, design annotations—everything you need to build the foundation of a great Figma design system.
\ \ Color styles \ \ 333 styles](/content/components/color-styles/index.html)
\ \ Typography styles \ \ 44 styles](/content/components/typography-styles/index.html)
\ \ Logos \ \ 3 components + 372 variants](/content/components/logos/index.html)
\ \ Icons \ \ 1,993 components + 352 variants](/content/components/icons/index.html)
\ \ Shadows & blurs \ \ 18 styles](/content/components/shadows-blurs/index.html)
\ \ Grids & spacing \ \ 38 variants + 8 styles](/content/components/grids-spacing/index.html)
\ \ File type icons \ \ 1 component + 153 variants](/content/components/file-icons/index.html)
\ \ Social icons \ \ 1 component + 102 variants](/content/components/social-icons/index.html)
\ \ Folder icons \ \ 1 component + 8 variants](/content/components/folder-icons/index.html)
\ \ Payment icons \ \ 1 component + 112 variants](/content/components/payment-icons/index.html)
\ \ Country flag icons \ \ 261 components + 783 variants](/content/components/flag-icons/index.html)
\ \ Integration icons \ \ 1 component + 32 variants](/content/components/integration-icons/index.html)
\ \ Cursors \ \ 1 component + 50 variants](/content/components/cursors/index.html)
Figma UI components
Figma base components
Buttons, inputs, avatars—all of the base components you need for modern product design and websites.
\ \ Avatars \ \ 280 variants + 98 styles](/content/components/avatars/index.html)
\ \ Badges \ \ 3 components + 666 variants](/content/components/badges/index.html)
\ \ Button groups \ \ 2 components + 64 variants](/content/components/button-groups/index.html)
\ \ Buttons \ \ 5 components + 940 variants](/content/components/buttons/index.html)
\ \ Checkboxes \ \ 2 components + 72 variants](/content/components/checkboxes/index.html)
\ \ Context menus \ \ 2 components + 32 variants](/content/components/context-menus/index.html)
\ \ Dropdowns \ \ 4 components + 143 variants](/content/components/dropdowns/index.html)
\ \ Inputs \ \ 7 components + 188 variants](/content/components/inputs/index.html)
\ \ Multi-select \ \ 4 components + 21 variants](/content/components/multi-select/index.html)
\ \ Progress indicators \ \ 2 components + 65 variants](/content/components/progress-indicators/index.html)
\ \ Radio groups \ \ 2 components + 168 variants](/content/components/radio-groups/index.html)
\ \ Select \ \ 6 components + 90 variants](/content/components/select/index.html)
\ \ Sliders \ \ 2 components + 39 variants](/content/components/sliders/index.html)
\ \ Tags \ \ 4 components + 210 variants](/content/components/tags/index.html)
\ \ Toggles \ \ 2 components + 64 variants](/content/components/toggles/index.html)
\ \ Tooltips \ \ 2 components + 84 variants](/content/components/tooltips/index.html)
Figma UI components
Shared Figma assets
Device mockups and useful utility pages—all of the shared assets you need for modern product design and websites.
\ \ 404 page headers \ \ 1 component + 28 variants](/content/components/404-page-headers/index.html)
\ \ Banners \ \ 1 component + 40 variants](/content/components/banners/index.html)
\ \ Credit cards \ \ 1 component + 13 variants](/content/components/credit-cards/index.html)
\ \ Design annotations \ \ 7 components + 38 variants](/content/components/design-annotations/index.html)
\ \ Device mockups \ \ 7 components + 18 variants](/content/components/device-mockups/index.html)
\ \ Email templates \ \ 3 components + 22 variants](/content/components/email-templates/index.html)
\ \ Forgot password headers \ \ 1 component + 10 variants](/content/components/forgot-password-headers/index.html)
\ \ Log in page headers \ \ 1 components + 32 variants](/content/components/log-in-headers/index.html)
\ \ Miscellaneous assets \ \ 3 components + 50 variants](/content/components/miscellaneous-assets/index.html)
\ \ Portfolio mockups \ \ 6 variants + 52 templates](/content/components/portfolio-mockups/index.html)
\ \ Sign up page headers \ \ 1 component + 42 variants](/content/components/sign-up-headers/index.html)
\ \ Verification page headers \ \ 1 component + 6 variants](/content/components/verification-headers/index.html)
\ \ Video players \ \ 3 components + 36 variants](/content/components/video-players/index.html)
Figma UI components
Application UI/Dashboard examples
Dashboard, settings, form layouts—useful examples for everything you need to design modern dashboards and products.
\ \ Dashboard examples \ \ 60 page examples](/content/components/dashboards/index.html)
\ \ Informational page examples \ \ 60 page examples](/content/components/informational-pages/index.html)
\ \ Settings page examples \ \ 42 page examples](/content/components/settings-pages/index.html)
Figma UI components
Application UI/Dashboard Figma components
Modals, tables, alerts—everything you need to design modern and beautiful apps, dashboards and products.
\ \ Activity feeds \ \ 2 components + 22 variants](/content/components/activity-feeds/index.html)
\ \ Activity gauges \ \ 3 components + 34 variants](/content/components/activity-gauges/index.html)
\ \ Alerts \ \ 1 component + 24 variants](/content/components/alerts/index.html)
\ \ Application header navigations \ \ 5 components + 80 variants](/content/components/application-header-navigations/index.html)
\ \ Breadcrumbs \ \ 2 components + 56 variants](/content/components/breadcrumbs/index.html)
\ \ Calendars \ \ 12 components + 82 variants](/content/components/calendars/index.html)
\ \ Card headers \ \ 1 component + 4 variants](/content/components/card-headers/index.html)
\ \ Carousels \ \ 4 components + 22 variants](/content/components/carousels/index.html)
\ \ Code snippets \ \ 1 component + 8 variants](/content/components/code-snippets/index.html)
\ \ Color pickers \ \ 6 components + 26 variants](/content/components/color-pickers/index.html)
\ \ Command menus (⌘+K) \ \ 5 components + 69 variants](/content/components/command-menus/index.html)
\ \ Content dividers \ \ 1 component + 18 variants](/content/components/content-dividers/index.html)
\ \ Date pickers \ \ 5 components + 68 variants](/content/components/date-pickers/index.html)
\ \ Drawers \ \ 2 components + 50 variants](/content/components/drawers/index.html)
\ \ Empty states \ \ 2 components + 36 variants](/content/components/empty-states/index.html)
\ \ File uploaders \ \ 3 components + 23 variants](/content/components/file-uploaders/index.html)
\ \ Filters \ \ 3 components + 38 variants](/content/components/filters/index.html)
\ \ Horizontal tabs \ \ 2 components + 280 variants](/content/components/horizontal-tabs/index.html)
\ \ Inline CTAs \ \ 1 component + 14 variants](/content/components/inline-ctas/index.html)
\ \ Line & bar charts \ \ 9 components + 116 variants](/content/components/line-bar-charts/index.html)
\ \ Loading indicators \ \ 1 component + 12 variants](/content/components/loading-indicators/index.html)
\ \ Messaging \ \ 3 components + 42 variants](/content/components/messaging/index.html)
\ \ Metrics \ \ 4 components + 36 variants](/content/components/metrics/index.html)
\ \ Modals \ \ 3 components + 252 variants](/content/components/modals/index.html)
\ \ Notifications \ \ 1 component + 18 variants](/content/components/notifications/index.html)
\ \ Page headers \ \ 1 component + 12 variants](/content/components/page-headers/index.html)
\ \ Pagination \ \ 3 components + 42 variants](/content/components/pagination/index.html)
\ \ Pie charts \ \ 3 components + 68 variants](/content/components/pie-charts/index.html)
\ \ Progress circles \ \ 1 component + 10 variants](/content/components/progress-circles/index.html)
\ \ Progress steps \ \ 7 components + 92 variants](/content/components/progress-steps/index.html)
\ \ Radar charts \ \ 3 components + 12 variants](/content/components/radar-charts/index.html)
\ \ Section footers \ \ 1 component + 8 variants](/content/components/section-footers/index.html)
\ \ Section headers \ \ 1 component + 12 variants](/content/components/section-headers/index.html)
\ \ Sidebar navigations \ \ 9 components + 168 variants](/content/components/sidebar-navigations/index.html)
\ \ Tables \ \ 4 components + 204 variants](/content/components/tables/index.html)
\ \ Tree views \ \ 3 components + 4 variants](/content/components/tree-views/index.html)
\ \ Vertical tabs \ \ 2 components + 264 variants](/content/components/vertical-tabs/index.html)
Figma UI components
Marketing website examples
Landing pages, blogs, sign up pages—useful examples for everything you need to design modern marketing websites.
\ \ 404 page examples \ \ 20 page examples](/content/components/404-pages/index.html)
\ \ About page examples \ \ 20 page examples](/content/components/about-pages/index.html)
\ \ Blog examples \ \ 20 page examples](/content/components/blogs/index.html)
\ \ Blog post examples \ \ 20 page examples](/content/components/blog-posts/index.html)
\ \ Contact page examples \ \ 20 page examples](/content/components/contact-pages/index.html)
\ \ FAQ page examples \ \ 20 page examples](/content/components/faq-page-examples/index.html)
\ \ Landing page examples \ \ 40 page examples](/content/components/landing-pages/index.html)
\ \ Legal page examples \ \ 10 page examples](/content/components/legal-pages/index.html)
\ \ Log in page examples \ \ 12 page examples](/content/components/log-in-pages/index.html)
\ \ Pricing page examples \ \ 20 page examples](/content/components/pricing-pages/index.html)
\ \ Sign up page examples \ \ 12 page examples](/content/components/sign-up-pages/index.html)
\ \ Team page examples \ \ 20 page examples](/content/components/team-pages/index.html)
Figma UI components
Marketing website components
Landing page header and website sections—everything you need to design modern and responsive marketing websites.
\ \ Blog post sections \ \ 3 components + 102 variants](/content/components/blog-post-sections/index.html)
\ \ Blog sections \ \ 4 components + 84 variants](/content/components/blog-sections/index.html)
\ \ Careers sections \ \ 2 components + 38 variants](/content/components/careers-sections/index.html)
\ \ Contact sections \ \ 6 components + 106 variants](/content/components/contact-sections/index.html)
\ \ Content & rich text sections \ \ 2 components + 78 variants](/content/components/content-sections/index.html)
\ \ CTA sections \ \ 1 component + 60 variants](/content/components/cta-sections/index.html)
\ \ FAQ sections \ \ 2 components + 72 variants](/content/components/faq-sections/index.html)
\ \ Features sections \ \ 2 components + 122 variants](/content/components/features-sections/index.html)
\ \ Footers \ \ 5 components + 192 variants](/content/components/footers/index.html)
\ \ Header navigations \ \ 10 components + 397 variants](/content/components/header-navigations/index.html)
\ \ Header sections \ \ 2 components + 148 variants](/content/components/header-sections/index.html)
\ \ Metrics sections \ \ 2 components + 42 variants](/content/components/metrics-sections/index.html)
\ \ Newsletter CTA sections \ \ 1 component + 32 variants](/content/components/newsletter-cta-sections/index.html)
\ \ Press mentions sections \ \ 1 component + 4 variants](/content/components/press-mentions-sections/index.html)
\ \ Pricing sections \ \ 5 components + 88 variants](/content/components/pricing-sections/index.html)
\ \ Social proof sections \ \ 1 component + 20 variants](/content/components/social-proof-sections/index.html)
\ \ Team sections \ \ 2 components + 56 variants](/content/components/team-sections/index.html)
\ \ Testimonial sections \ \ 3 components + 92 variants](/content/components/testimonial-sections/index.html)
The ultimate UI kit for Figma
What is Untitled UI?
Untitled UI Figma is the largest UI kit and design system for Figma in the world. Here's everything great about Untitled UI in just 60 seconds.
Untitled UI in 60 seconds
The ultimate Figma UI kit | Untitled UI from Untitled UI on Vimeo
Playing in picture-in-picture
Pause
Speed
Picture-in-Picture
Show controls
2x
1.5x
1.25x
1x
0.75x
0.5x
\ Preview in Figma](/content/preview/figma/index.html)
Join 380,000+ designers from the world's top companies
Untitled UI is the best $ I've spent on my business in a long time. I'm going to keep using it and recommending it to every designer I know.
Sam Pierce Lolla
Founder, Shuffleboard
Over the years we've featured hundreds of UI kits on UXCrush, but Untitled UI is by far the most comprehensive and detailed I've seen yet. A must have for any designer!
Luca Vavassori
Founder, UXCrush
I've used all UI kits on the market. I can say without a doubt that the Untitled UI kit is the best on the market. It covers everything a designer needs in a modern and efficient way.
Murat Alpay
Product Designer, @imuratalpay
Incredible, and keeps getting better. I’ve tried dozens of UI kits and Untitled UI is the only name you should care about. It stands head and shoulders above the rest.
Jérémy Franck
Designer, @jrmyfranck
Such a beautiful, detailed, and extensive UI kit. Untitled UI is the perfect foundation for any project. I highly recommend this huge time saver.
Adham Dannaway
Product Designer, Practical UI
Untitled UI has been an amazing resource that I'm learning to rely upon to spin up ideas in no time. I think I might launch a startup pretty soon by mistake here!
Riccardo Buzzotta
Senior Product Designer, Spotify
The sheer scale, details, and organization of this kit is mind-blowing. It covers nearly everything a Designer could need in a modern, efficient and systematic way.
Corey Moen
Senior Brand Designer, Webflow
I'm super impressed with this. I love poking around in other peoples UI Kits to see how they think. This is probably one of the most comprehensive I've seen.
Matt Walker
Design Systems, Mailchimp
I'm super excited to use this for quick mockups of ideas in Figma. We're always trying to streamline our design process so we can move fast! Definitely recommend.
Jenny Chu
Head of Product, Eucalyptus
Untitled UI is easily the best UI kit I've used so far. It has an insane amount of components that are all incredibly well-built. I don't even know how many hours this will save.
Sunny Trochaniak
Founder, NewPulse Labs
The attention to detail and thought Jordan has put into this UI kit is unparalleled.
Dan Mcleay
Lead Designer, Fox Sports
Untitled UI is incredibly well-organized and the attention to detail is great. I highly recommend this kit to any designer that wants to create beautiful designs fast.
Tom Bekkers
Founder & Creative Director, Flowbase
What an awesome Figma kit... it's an absolute game changer. This is the perfect base for any design system. The size and attention to detail is next level.
Dan Anisse
Co-founder, Relume
We've been using Untitled to build Himalayas 2.0 and have finished a complete redesign in just a few days. It has everything we need already pixel-perfect.
Abi Tyas Tunggal
Co-founder, Himalayas
Join our affiliate program
A simple and easy way to make 30% of every sale you refer to Untitled UI. Earn up to $2,699.70 on each sale!
Untitled UI in 60 seconds