Skip to main content

How to create a unique anchor ID and link

An anchor link is a URL that takes a user to a specific place on any page or blog post. These can be really handy if you plan on creating a one-page website.

Here we will cover how you can add an anchor to any component and then link to it with a button or navigation item.

Create a unique anchor ID for a component

Step 1

Login to the CMS and go to (or create) a page or blog post.

Step 2

On the content tab locate the label 'Main content'. You should either 'Add content' or click on an existing component.

Step 3

From the slide-out panel, click on 'Settings' in the top right corner. 

Step 4

Scroll down to the label 'Anchor name' and enter a name in the field provided. 

Please note, if you do leave any blank spaces here then they will be automatically removed and replaced with an underscore, like so _

You should copy what you have entered for the name, you will need this for the next part.

Add a unique anchor ID to a modular component on any page in Umbraco.

Add an anchor link to your navigation

Step 1

In the tree menu on the left, go to 'Global'.

Step 2

On the right side, click on 'Navigation'.

Step 3

On the 'Main' tab, locate the label 'Main navigation' and click 'Add' at the bottom.

Step 4

In the slide-out panel, at the label, 'Anchor / query string' enter the unique ID you created above e.g. #my_anchor

At the label, 'Link title' enter the name you would like users to see on your navigation. Now click 'Submit'.

Link to a unique anchor ID from your navigation in Umbraco.

Step 5

Once the slide-out panel is closed, adjust your navigation link to suit your needs and the 'Save and publish'.

Drag and drop mega navigation with anchors in Umbraco.

Other ways to link to a unique anchor ID

In the above example, we are linking to the anchor ID from the main navigation, however, you can link to an anchor ID from any link picker in your uSkinned for Umbraco website. This includes, from components, pods, footer navigation — everywhere!

#h5yr

uSkinned Site Builder

Get started — for FREE!

Join thousands of agencies, freelancers & businesses of all sizes worldwide who use uSkinned Site Builder for Umbraco to deliver results.