How do I add a navbar in Webflow?

Drag a navbar onto the page

Open the Add panel and choose Other. Drag a Navbar onto the canvas. Webflow treats it as a self-contained wrapper, so you can place it in the body, in a section, or move it later.

The element arrives with four parts:

• Brand: a link block on the left, for a logo or a wordmark.
• Nav menu: the parent on the right that holds the links.
• Nav links: text links. Three placeholders are included. Edit them, delete them, or add more.
• Menu button: hidden on desktop, shown on tablet and below. It is the control people sometimes call a hamburger menu.

On desktop the links sit in a row inside the nav menu. On a smaller breakpoint, that same nav menu is what opens when the button is clicked. It is not a second set of links.

Point the brand and the links

Upload the logo from the Assets panel, then drag it into the brand link. Select the brand link, open Link settings, choose Page, and pick Home. Webflow's navbar article also recommends two custom attributes on that link, so a screen reader can tell what it does. In Custom attributes, add a name of role and a value of navigation. Add another attribute named aria-label, with a value such as Back to homepage.

Select a nav link, open Link settings, and choose the link type. Set each link to its own page or section. The File link type is only available on some paid Workspace or Site plans.

To add a link, select anything in the navbar, open Navbar settings, and click Add link. You can also keep one styled link, give it a class, then copy and paste it. Each paste keeps the class. Double-click a link to change its text.

Give every nav link the same class before you style them. A color or padding change on that class then hits the whole row. For a hover color, open the States menu on that class and choose Hover. The hover guide covers that state. This page is about the navbar itself.

Example: a studio site needs Home, Services, Work, and Contact. Keep one nav link, name the class Nav link, paste it three times, and point each one at its page. The brand image points at Home.

Choose where the menu button appears

By default the button appears on the tablet breakpoint and below. Preview, switch to tablet or to a phone width, and click the button. The nav menu opens. Click again and it closes.

To open that menu while you design, select the navbar or anything inside it, open Navbar settings, and choose Menu, then Show. The Designer switches to the tablet breakpoint.

The device options slider in Navbar settings chooses where the button first appears. You can show it on every breakpoint, or on none. If the row of links still fits on a laptop, leave the default and let the button start at tablet.

The button is part of the navbar. It is not the separate dropdown element. A dropdown is a list that opens from one label, and the dropdown guide covers that element if one label in the bar needs its own list.

Set the reveal, then style the button

Navbar settings includes the reveal animation. Three types are available:

• Drop down is the default. The menu opens downward and takes the full width of the browser.
• Over right slides the menu in from the right and takes the full height of the browser.
• Over left does the same from the left, also at full height.

For each type you can set the easing curve and the duration of the open and close. Pick the reveal on the navbar, then preview on tablet before you spend time on colors.

Styles cascade down from larger breakpoints. Select the largest breakpoint where the button is enabled, then style it there. On tablet, select the menu button, open Backgrounds, and set a background color. The icon inherits typography from the button. Change Size to make the icon larger, and change the font color to recolor it. You can delete the icon and put an image or a text element in the button instead.

The open look is a separate class. With Show turned on, change a style on the button or add a class, and Webflow adds an Open class in the selector. Style that class for the open background and icon color. The resting button keeps the styles you set without Show.

On tablet, select the navbar and choose Menu, then Show, when you need to reach the open menu. Extra padding on the nav links makes the tap targets easier to hit with a finger. The navbar has no preset width or height. Its height comes from the logo, the links, or padding you add.

Reuse one bar, and stick it only if you mean to

A navbar you will use on every page should be a component. Select it, right-click, choose Create component, and name it. Edits to the main component update every instance. Drag the component from the Components panel onto each page. The component guide shows that reuse in more detail.

Holding the bar on scroll is a separate step. The sticky navbar guide covers position sticky, a top value, and the parent styles that stop it from sticking. Set that only after the links and the menu button already work.

If you would rather hand over the link list, send the page names and the logo in writing. I can build the navbar from that note. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Your Webflow subscription and hosting stay in your own account.