How can I link a navigation bar item to a collection page in Webflow?

Published on
September 22, 2023

To link a navigation bar item to a collection page in Webflow, follow these steps:

  1. Select the navigation bar element: In the Webflow Designer, click on the navigation bar element that you want to link to the collection page. This will open the settings panel for that element.

  2. Open the link settings: In the settings panel, locate the "Link Settings" section. Click on the arrow to expand the section and reveal the options.

  3. Choose the collection page: In the link settings section, you will see an option to choose the link type. Select "Page" from the drop-down menu.

  4. Select the collection page: Once you've chosen the page link type, a new dropdown menu will appear. Click on the dropdown menu and select the collection page that you want to link to. This will populate the link field with the appropriate URL.

  5. Customize the link text: By default, Webflow will use the title of the collection page as the link text. If you want to customize the link text, simply edit the text inside the navigation bar element.

  6. Style the active state: If you want to style the navigation bar item differently when the linked collection page is active, you can do so by selecting the navigation bar item and going to the "States" panel. From there, you can customize the styles for the "Current" state.

  7. Preview and publish: After you've linked the navigation bar item to the collection page, you can preview your site to ensure that the link is working as expected. Once you're satisfied, publish your site to make the changes live.

By following these steps, you'll be able to successfully link a navigation bar item to a collection page in Webflow.

Additional questions:

  1. How do I create a collection page in Webflow?
  2. Can I link a navigation bar item to an external website?
  3. How can I create dropdown menus in Webflow's navigation bar?