On a uConnect page (a Community page or custom page), you will typically have multiple widgets displaying your different types of curated, dynamic content. To best allow users to see, at a glance, what content is available on that page, and to allow them to easily navigate to it, we recommend the use of an anchor-link hero navigation menu, as seen in the image below:
An anchor-link hero navigation menu will display below your header image and will allow a user to select from the different menu items to be brought directly to a given widget on the Community. We'll walk you through how you can build a customized anchor-link hero navigation for your Communities below!
Written Instructions for Building a Hero Navigation Menu that Links to Widget Sections:
STEP 1) Navigate to Customize > Menus.
STEP 2) Select 'create a new menu' next to the menu dropdown. We recommend titling it 'Community Hero Navigation.'
Please note: it is very likely that you will already have a Community Hero Navigation menu built for you. If that is the case, consider if you would just like to edit that existing menu as Community Hero Navigations are dynamic and will only show a button for a widget if that widget is appearing on that page, for example, the LinkedIn Learning button would only appear if you have a widget already displaying LinkedIn Learning courses on that Community, you are typically able to use one Community Hero Navigation across all Communities.
STEP 3) From the 'Add menu items' left-hand sidebar, expand the 'Custom Link' field.
STEP 4) Here, you will want to add the widget code that corresponds to the widgets that are appearing on your Community.
To find the widget code, navigate to the front-end of the Community (aka the URL for that Community that you would share with a student or colleague). From there, highlight the widget title that you are looking to add a menu item for. Once highlighted, right-click and then hit 'Inspect.' Hitting 'Inspect' will open up the view that allows you to access the widget code. Look for the ' <div id=" ' above the widget title and copy the code that it shows. For example, in the screenshot below, you can see where we've highlighted that widget code is 'uc_job_search-2'.
Pro Tip: The typical format for a widget id will be: #uc_[insert content]-[insert ID #] such as "uc_resource_tiles-2" in the above example screenshot.
STEP 5) Add the widget ID to your Menu
Now that you have found the widget code, you will want to return to the admin dashboard under Customize>Menus, and in the 'Custom Link' field, you will put a hashtag followed by the widget code in the 'URL' field. You can add the title of that menu item in the 'Navigation Label' field.
STEP 6) Add as many other menu items as needed, and hit 'Save Menu!'
STEP 7) Reach out to us to activate a widget to take your Menu live
Lastly, if you have created a new menu, and not just edited the existing menu, use the form here to ask our Support Team to activate a widget for you. Please share with them that you are adding a community hero navigation menu, the title of the menu, and which Communities you will want it to appear on.
Video Instructions for Building a Hero Navigation Menu that Links to Widgets:
Written Instructions for Building a Hero Navigation Menu that Anchor Links to Content on Your page:
Instead of creating an anchor link to a widget section, like a Resources widget, on a page, you may want to create an anchor link to a specific section title or paragraph or even button on your page - not a widget. In this case, you'll want to grab the existing HTML anchor link within the Block Editor content of the page (the "Edit Static Content" button within a Community page).
Let's review how to do this, and we'll use this example: I am trying to create an anchor link menu with two buttons; one button will anchor down to the "Build Your Skills" section and the second button will anchor down to the "Build Your Credentials" section:
STEP 1) First, find your page (if it's a Community page, it will be under Manage>Communities; if it's a custom page, it will be under Publish>Pages) and click "edit" on the page. We'll use a Community page as an example.
STEP 2) Then, click the "Edit Static Content" button to access the Block Editor content of the Community page.
STEP 3) Once you're in the Block Editor, always open up your Document Overview on the left by clicking the 3 small horizontal lines button so you can see all the current blocks that are in use. Then, find the section heading you are trying to create an anchor link for. Click on that section heading, and then on the right side of your screen, a menu should appear for this heading block specifically. Within these settings, you should find an "HTML Anchor" section under "Advanced," and you'll see that phrase has already been generated as a anchor link phrase for you. In this example, it's the word "skills" because that word is also in the section head. Highlight and copy this HTML anchor phrase because we're going to paste it in the Menus section next.
Note: If you don't see the menu/settings on the right side for the "Advanced" and "HTML Anchor" section, try clicking on the small square icon in the top right corner. This will open up the menu settings for that block if they are not already visible:
STEP 4) Next, navigate to the Menus section under Customize. First, select your menu that you'd like to edit from the drop-down menu and then hit "Select" (or create a new menu). Then, click on the Custom Links menu item under "Add Menu Items." In the "URL" field, add the # (hashtag/pound sign) symbol followed by the HTML anchor phrase, which in this example is "skills," so it would appear like this - #skills. Then, fill in the "Link Text" which will be the name of the button and click "Add to Menu." Next, under Menu Structure, drag and move the newly-added Custom Link menu item in your preferred menu order and finally click "Save Menu."
STEP 5) Now, repeat these steps for the next section heading. Once you've done that and added the second HTML anchor link to this menu, your part is complete! The final step in getting your new menu to appear is to reach out to our Support team by submitting a widget request for menu so your menu can appear live on your page.
Video Instructions for Building a Hero Navigation Menu that Anchor Links to Content on Your page:
Still Have Questions?
If you're having difficulties in adding or updating a menu you can reach our Support team using the button below: