You've got many options when adding navigation to your project, and one of the most common and powerful ways to do this is through a Navbar.

Webflow Navbar

The Navbar gives the user a good top-level view of the content in the project. On devices with less horizontal screen real estate, the Navbar can also be configured to display a menu button which lets the user access that same navigation in a hidden menu.

 

We'll cover five aspects of the Navbar:

  • Adding a Navbar
  • Anatomy of a Navbar
  • Configuring the brand or logo on the Navbar
  • Adding and styling Nav Links
  • Reusing the Navbar throughout the project

Adding a Navbar

Webflow Navbar

To add a Navbar:

  1. Go to the Elements Panel
  2. Scroll to the Components section
  3. Drag a Navbar onto your page.

You can place the Navbar wherever you’d like in your page. Typically, you might place it at the top of your page inside the body element. There's no right or wrong way to do this. You can put it in a section, in a container, at the bottom of the page, it’s your choice. You can also move the Navbar at any time. It's self-contained.

 

Anatomy of a Navbar

The Navbar houses a group of components all placed neatly inside a container which keeps the content centered on the page.

  • Brand - The Brand placeholder is a Link Block located to the left of the Navbar. Here you can add a logo or text or any other brand indication.
  • Nav Menu - To the right is the Nav Menu. It contains all the Nav Links—or navigation links.
  • Nav Links - These are text links with some predefined padding and other styles. They are usually linked to different pages or sections in your website.
  • Menu Button - By default, the Menu button is hidden on desktop view. It allows you to access the nav menu and Nav Links when there is limited horizontal space, like on a mobile device. Learn more about the Menu Button.
Webflow Navbar Anatomy

Configuring the Brand

Adding a brand logo

You can add an image or a text inside the brand link block. When you add an image, you can drag the edge to resize it, or you can style the image or the Brand link block in the Style Panel.

 

Linking the Brand to the homepage

A common practice for the Brand image or logo is to have it link back to the homepage. To link the brand link block to the homepage:

  1. Selected the Brand link block
  2. Go to Element Settings (Shortcut: D)
  3. Under Link Settings choose Page
  4. Select Home from the drop-down.
 

Nav Links

By default, the Navbar comes with a few Nav Link placeholders. You can edit or delete these. You can also add more.

Adding Nav Links

To add more Nav Links:

  1. Select any element in the Navbar
  2. Go to the Element Settings (Shortcut:D)
  3. Under Navbar Settings, click Add Link
 

Another way to add Nav Links is to copy and paste a Nav Link that already has a class applied to it. This a great time saver if you plan on styling a number of Nav Links. To do this:

  1. Delete all but one Nav Link
  2. Give this Nav Link a class.
  3. Copy and paste this Nav Link as many times as you need.

When you duplicate this Nav Link, the class is already applied to each new Nav Link you paste. Now, you can double-click the Nav Link to edit the text inside.

 

Styling Nav Links

By default, the width of these Nav Links is determined by the text inside and any padding that's applied to the Nav Link class. You can change the left and right padding and style Nav Links further by applying different styling options from the Styles Panel. 

Explore more Navbar and Nav Link styling options.

Linking Nav Links

You can link each Nav Link to a different source. To link a Nav Link:

  1. Select the Nav Link
  2. Go to the Element Settings (Shortcut: D)
  3. Under Link Settings, select the link type
Webflow Link Settings

Reusing the Navbar

When building multi-page sites, you will want to add the same Navbar on all your pages. With Symbols, you can not only add the same Navbar to various locations and pages in your project, but you can also edit one instance of the Navbar and have all your Navbars across your project updated instantly.

To save your Navbar as a symbol:

  1. Select the Navbar
  2. Open the Add Panel
  3. Select the Symbols tab
  4. Click Create a new symbol
  5. Give your symbol a name and click Create Symbol

Now this Navbar and everything inside it is globally accessible on all your pages from the Symbols Panel. To edit a symbol, double-click on it. Any changes you make on any element in a symbol will instantly show in all other instances of the symbol. So, if you make a change on this reusable Navbar on any page, that affects the others as well.