Developer mode
Opens components on the React tab by default.
Your bookmarks

NavigationBar

Also known as toolbar, navbar

Wraps top-level navigation and branding.

If your users can’t navigate through your app, they’ll never find your amazing designs. Present them with a clear and consistent means of finding their way and they’ll keep coming back for more.

Use a navigation bar to wrap your top-level navigation and branding such as a logo and keep everything in a place your users will expect.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Sketch
Released
Native bar (design first for native mobile)
Back button: allows users to go back to a previous screen; title: gives users context for where they are; action: adds an action for the entire screen.

Responsive bar (then make a responsive design)
Home button: enables users to navigate to the top level; dropdown: optionally opens additional nav items; link list: optionally places multiple buttons next to one another; menu: optionally opens additional options.