How to create a navigation bar with a mobile menu

In TeleportHQ, you add a navigation bar from Elements → Sections → Navbar. Click a design, for example Plain bar, and it becomes your site's navigation at the top of every page, with links to your pages. On phones, the links fold into a Menu button that opens a phone menu.

Before you start#

• Navigation bars work in websites and web apps.
• You need a role that can add sections (it creates a component). See What can each role do?
• A site has one navigation. If yours already has one, the design you pick replaces it on every page and keeps its links.
• Create your pages first, so the new navigation can link to them. See How to add a new page.

1. Pick a navigation bar#

1. In the TeleportHQ editor's left sidebar, click Elements.
2. Open the Sections tab and click the Navbar category.
3. Choose one of the designs. For example, Plain bar puts your name on the left and your pages and one button on the right. Menu at every size shows the menu button on every screen.
4. Click the design.

A message confirms it, for example "The Plain bar is now the site's navigation, at the top of every page." TeleportHQ:

• saves the bar as a component named Navigation and puts it at the top of every page;
• fills its links with your pages, in your pages' order, and links your name to the home page (the 404 page, pages behind a sign-in and pages left out of the site get no link);
• shows your logo instead of the sample name, if your project has a logo component;
• marks the component as your site's navigation, so links to new pages can be added for you. See Why do my menu links change when I add or rename a page?

2. Change the texts and links#

The navigation is a component, so you edit it once for every page.

1. On the canvas, double-click the navigation bar. The Navigation component opens in its own tab.
2. Double-click a text to change it, for example the sample name or the button's label (Order a cake).
3. To change where a link goes, select it and click the link icon above it. See How to add links and buttons.
4. Click your page's tab above the canvas to go back.

The bar's links and the phone menu's links are separate lists. When you change one, change the other too. See How to edit a component and update every copy.

3. Edit the phone menu#

On the Mobile Landscape screen size and smaller (767 px wide unless you changed it), the bar hides its links and shows a menu button with three lines, which turns into an X while the menu is open. A click on it opens the Phone menu. Screen readers announce the button as Menu.

While you edit, the phone menu is closed. To show it on the canvas:

1. Open the Navigation component (double-click the bar).
2. At the bottom of the canvas, click the hidden elements button, for example 3 hidden elements. The Hidden Elements list opens.
3. Next to Phone menu, click Show. The phone menu appears on the canvas. (In Menu at every size, the menu is named Menu.)
4. Edit its links and button.
5. In the same list, click Hide next to Phone menu.

Show and Hide only change what you see in the editor. Visitors always start with the phone menu closed.

Check that it worked#

Switch the canvas to a phone screen size with the screen size icons above the canvas. The links disappear and the menu button shows. To try the button, preview your site, make the browser window narrow and click the button.

Troubleshooting#

"Your current role does not have permission to add sections." Ask a workspace admin for a role that can edit components. See What can each role do?

The menu shows sample links such as Work, Studio and Journal Your site had no page besides the home page when you picked the design. Change or delete the sample links in the Navigation component.

"Could not add the Plain bar: …" The message names what went wrong. Try again, or pick another design.

The navigation doesn't stay at the top when visitors scroll Most navbar designs stay at the top. If yours doesn't, see How to make a header stay on screen when scrolling.

Good to know#

• Undo: one Undo removes the new navigation and brings back the one you had before.
• Texts written for you: turn on Use AI to generate content in the Navbar category before you click a design. AI then writes the bar's texts for your site, which uses AI tokens.
• Submenus: put a Dropdown element inside the Navigation component for a menu with sub-items. See How to create a dropdown menu.
• How the menu button works: it switches a state named menuOpen on the Navigation component, and the phone menu shows while that state is on. States work in every project, so there's nothing to turn on. See How to use states in a component.
• Navbars added earlier: the Navbar element is no longer in Elements → Primitives. A navbar you added with it keeps working: select it, and navbar settings in the right panel still offer Menu, Animation and Collapse navbar.
• Footer: the Footer category works the same way and gives your site a footer at the end of every page. See How to add ready-made sections.