Try ShortPoint nowThis article will demonstrate how you can create a functional drop-down menu using SharePoint:
TABLE OF CONTENTS
- Elements of the Drop-down Navigation Menu
- Step-by-step Tutorial
- BONUS: Level-up the Design of Your Navigation Menu
Elements of the Drop-down Navigation Menu
Before proceeding, it’s important to define some terms so that you can easily follow the step-by-step Tutorial.
- Links - are the clickable titles in the navigation menu. When you click them, they redirect to another page. In our example, Home is a link that redirects users to the home page:
- Labels - are the non-clickable titles in the navigation menu. Unlike links, they do not redirect you to another page when you click on them. They simply serve as the main title of the items in the drop-down. In our example, the labels are Sales and Socials:
- Sub links - are the clickable items under a Label or a Link. Much like a link, they will redirect users to another page. For example, under the label “Sales” are the sub links “Customers” and Vendors”:
Now that you know these terms, you’re ready to start the tutorial.
Step-by-step Tutorial
The steps have been divided into two parts. Follow along to get started:
Part 1: Customize the Menu Style
NOTEIf your Menu style is already set to Cascading, you can skip Part 1 and proceed to the steps in Part 2.
Step 1: Open the Change the Look Menu
Click the cogwheel icon:
Select Change the look:
Step 2: Change Menu Style to Cascading
Click Navigation:
Select the Cascading Style:
Step 3: Save
Save your changes:
Close the Settings window:
Part 2: Create the Navigation Menu
Part 2 will detail how to customize the navigation.
Step 1: Edit the Navigation Menu
Go to the SharePoint page you want to use and click Edit:
Step 2: Add Labels
Click the plus icon:
From the drop-down, select Label:
Write a [1] Display Name and click [2] OK:
Repeat the same steps to add other labels:
Step 3: Add Links
Click the plus icon:
From the drop-down, select Link:
In the Address field, add the URL of the page you want the user to be redirected to:
Then, add a Display name. This is the text that will appear in the drop-down:
Toggle on [1] Open in a new tab if you want the link to open in a new tab, and click [2] OK:
Repeat the same steps to add other links:
TIPIn case you make a mistake and want to edit the link or label again, simply click the ellipsis icon, select Edit, and make your changes.
Step 4: Rearrange Links
Drag and drop the Links under the Label it belongs to. In our example, Customers and Vendors are under Sales, so we will drag them under the Sales Label:
Step 5: Turn Links into Sub links
Click the ellipsis icon located beside the link you created:
Then, select Make sub link:
Repeat the same steps for all the links you created:
NOTEIf you wish to turn on audience targeting to promote content for specific audiences, toggle on Enable site navigation audience targeting. This will add the Audiences to Target field, which allows you to specify who can see the links and labels you create.
Step 6: Save
Click Save to apply your changes:
TIPIn case you want to delete any of the links or labels you created, simply select the ellipsis icon and click Remove:
Congratulations! You now have a drop-down navigation menu:
BONUS: Level-up the Design of Your Navigation Menu
Now that you have a functional drop-down navigation menu, what’s next? Of course, the next big thing is to make it look even more amazing and adhere to your brand! What better way to do that than to use the ShortPoint Theme Builder. It is the perfect tool to help you customize its appearance and make it truly your own.
With Theme Builder, you can change the menu alignment:
Customize the text color, background color, and even the hover colors of the menu:
You can also level up the look of the entire header by adding a background color:
And, best of all, you can aim for a cleaner look by hiding elements you may not use often:
Cool, right?! Want to give it a try? Start a FREE 15-day trial with ShortPoint! You can schedule a demo or reach out to our Sales team to help you get started with us. We’re excited to see the amazing designs you’ll create.
Related articles:
