How to mark a component as your navigation, footer or logo
In TeleportHQ, you tell the editor which component is your site's navigation, footer or logo. In the Components folder of the left sidebar, right-click the component and choose Set as Navigation, Set as Footer or Set as Company Logo. With a navigation and footer marked, TeleportHQ can add, rename and remove menu links when you add, rename or delete pages, and asks for confirmation before those components are deleted.
Before you start
- Your navigation bar and footer must already be components. See How to create a component.
- You need the Owner, Admin or Designer role.
- Sites built with the AI Website Builder usually have these roles set already.
- A Navbar or Footer design picked from Elements → Sections becomes your navigation or footer on its own: TeleportHQ makes it a component, gives it the role and places it on every page. See How to add ready-made sections.
Steps
- In the left sidebar, click Pages, Components & Tree View.
- In the Components folder, right-click your navigation component, for example
Navigation. - Choose Set as Navigation. An icon appears next to the component (tooltip "Navigation Component").
- Right-click your footer component, for example
Footer. - Choose Set as Footer. An icon appears next to it (tooltip "Footer Component").
- To mark your logo, right-click the logo component and choose Set as Company Logo.
Let TeleportHQ find them for you
The first time you add a page in a project with no marked components (and not made with the AI Website Builder), TeleportHQ may show a Navigation and Footer window: "No components currently have a Navigation or Footer role."
- Click Autodetect. TeleportHQ scans your components.
- If it finds both, you see "Navigation and Footer components were detected and marked successfully."
- If it finds only one, or none, mark the rest yourself with the steps above.
Click Show Me How for a short guided tour, or Close to skip.
In a project made with the AI Website Builder, the roles are already set. The first time you open the navigation or the footer, a Your Navigation (or Your Footer) panel explains it. Click Show Me How or Got It.
What each role does
- Navigation and Footer: when you add, rename or delete a page, TeleportHQ updates the links in these components. Duplicating a page doesn't add a link. Learn more in Why do my menu links change when I add or rename a page?
- Company Logo: tells TeleportHQ which component is your logo. TeleportHQ uses it in what it builds for you, such as the header of sign-in and sign-up pages, a store invoice and the emails it sets up. Only one component can be the company logo at a time. Marking a new one removes the role from the old one.
To remove a role, right-click the component and choose Remove as Navigation, Remove as Footer or Remove as Company Logo.
Links the store and Bookings add
When you switch on a TeleportHQ store, TeleportHQ makes sure your navigation and footer lead shoppers to it, and adds what's missing:
- In the navigation: a Shop link to your products page, a cart button (the cart icon with the number of items, which opens the cart) and an account menu (a profile icon that opens the signed-in shopper's account links, such as My Orders, and Sign out).
- In the footer: a Shop link and a My account link to the shopper's account page.
Switching on Bookings adds a Book online link to both, and the same account menu and My account link. See How to add bookings to an existing project.
A message names what was added, for example "Added a “Shop” link, a cart button, an account menu and a “My account” link to your navigation and footer." On a site in another language, the new labels are translated like the store's pages. Nothing is added twice: a link that already goes to the same page, and a cart button or account menu your navigation already has, are kept as they are. TeleportHQ places each one where it fits in your design, and copies a navigation link into its phone menu when it has one. It only adds them to the components marked as your navigation and footer. In a site that TeleportHQ's AI builds, the same links are added at the end of the build, without a message.
To remove one of them:
- On the canvas, double-click your navigation or footer. The component opens in its own tab.
- Select the link, the cart button or the account menu.
- Press Delete or Backspace. If your navigation has a phone menu, delete the copy there too.
TeleportHQ adds a missing one again only when you switch the store or Bookings on again, or rebuild deleted store pages with Regenerate Pages. See How to regenerate store pages or turn off e-commerce.
The store also adds a Right of withdrawal link to your footer. See How to handle return (withdrawal) requests.
Check that it worked
The role icon shows next to the navigation and footer in the Components folder. (The company logo has no icon.) Add a test page: a link to it appears in your navigation, with a notification.
Troubleshooting
No link was added to my menu when I created a page Automatic links use AI tokens, and nothing happens if your workspace has fewer than 1,000 tokens. Also check that Create navigation links for new pages and Create footer links for new pages are on: click the Project settings cog at the bottom of the left sidebar, then Editor → Preferences → Editing, and look under Links. Links aren't added for legal and error pages: the 404 page, the terms page, and any page whose title contains a word such as Terms, Privacy, Cookie, Legal, GDPR, Imprint, Disclaimer, 404, Error or Not found. They also aren't added for a details page, a page that shows one item from your data, because a menu link would open it with no item. The one exception is the signed-in visitor's own page, such as a "My profile" page. See How to create a page for each item (details pages).
"No suitable Navigation or Footer components were found. You can assign roles manually by right-clicking a component in the sidebar." Autodetect couldn't recognize your components. Use Set as Navigation and Set as Footer from the right-click menu.
The Set as options are missing They aren't offered for email template components, or if your role can't edit components.
Deleting my navigation asks for confirmation This is the protection the role adds: "This component is a Navigation component. It and all its instances will be removed." Confirm only if you really want to remove it from every page.
Good to know
- A component has one role at a time.
- To stop links being removed when you delete a page, turn off Remove links when a page is deleted in the same Links section (Project settings cog → Editor → Preferences → Editing).
- Picking another Navbar or Footer design from Elements → Sections restyles your current one: the new design keeps your links and takes its place on every page.