How can I link specific sections of a page in Webflow's dropdown menu?
TL;DR
- Assign unique IDs to target sections in the Element Settings panel.
- In the dropdown menu, set each link's type to Page Section or URL and point it to the matching ID (e.g., #about).
- Use full paths with anchors (e.g., /about#team) for links to sections on different pages.
To link to specific sections of a page from a dropdown menu in Webflow, you need to use anchor links that target section IDs within your page.
1. Add a Unique ID to the Target Section
- Select the section (or element) you want to link to.
- In the Element Settings panel (D), look for the “ID” field.
- Enter a unique ID (e.g.,
about,services,contact). - This ID will become the anchor destination (e.g.,
#about).
2. Create or Edit the Dropdown Menu
- Open your Navbar (or wherever your dropdown lives).
- Click inside the Dropdown Menu element.
- Use Link Blocks or Text Links for each menu item.
3. Set the Anchor Link in the Dropdown
- Select a link inside the dropdown.
- In the Element Settings panel (D), set the Link Type to Page Section (Anchor Link).
- Select the appropriate section ID from the dropdown, or manually type
#about,#services, etc.
4. Test the Link
- Click Preview (Eye Icon) in the top bar.
- Click your dropdown link — it should scroll smoothly to the correct page section.
5. For Links on Other Pages
- If your dropdown is in a Symbol used site-wide and you want to link to a section on a different page, use a full path like
/about#team. - Set the link type to URL and input custom paths with anchors.
Summary
Assign unique IDs to each section you want to link to, then set the corresponding anchor link (#id) in your dropdown menu using Page Section or URL type. This enables smooth in-page navigation from dropdown items.