How can I create a fixed left menu that changes the color of the link when navigating to another page, while using the CMS in Webflow?

Published on
September 22, 2023

To create a fixed left menu that changes the color of the link when navigating to another page using the CMS in Webflow, you can follow these steps:

  1. Create the menu structure: Create a Collection called "Menu" with fields for the menu item names and their corresponding links.

  2. Design the fixed left menu: Design your fixed left menu using HTML and CSS. You can use a div container with a fixed position, set its width, and apply the desired background color and styling to create the appearance of a side menu.

  3. Add a Collection List: Add a Collection List to your fixed left menu. Set the Collection List to pull data from the "Menu" Collection and style the list items accordingly.

  4. Link the menu items: Inside the Collection List, add a link block for each menu item. Link each item to its corresponding page using the dynamic CMS link field. You can access this field by clicking the "+" button on the link block, choosing "CMS," and selecting the appropriate link field in the Collection.

  5. Add a current page state: To change the color of the active menu item when navigating to another page, you'll need to create a dynamic current page state. Select the link block inside the Collection List and go to the Settings panel on the right-hand side.

  6. Create a Current State: In the Settings panel, find the "States" section and click on the "+" button to create a new state. Name the state "Current" or any other relevant name.

  7. Define the style for the Current State: Customize the appearance of the "Current" state, such as changing the color, font weight, or background color of the active menu item.

  8. Set the Current State: To make the current page menu item change dynamically, set the Current State condition using the dynamic data. You can access this by clicking on the "Select field" button next to the state condition and selecting the appropriate field in the CMS Collection.

  9. Preview and publish: Preview your website to see the fixed left menu in action. Make sure to test the menu on different pages to ensure the active link color changes appropriately.

By following these steps, you can create a fixed left menu that changes the color of the link when navigating to different pages using the CMS in Webflow. This way, you can easily manage the menu links through the CMS interface and have a consistent user experience throughout your website.

Additional Questions:

  1. How do I create a fixed left menu in Webflow?
  2. Can I create dynamic menu links in Webflow using the CMS?
  3. How do I style the active menu item in Webflow using the CMS?