2

I have created a custom html page on our SharePoint site using the script editor, I am hiding all of the SharePoint elements and creating my own navigation look and feel.

I have created a custom navigation bar on the left with hard-coded links and icons... I would like to add the links from the "Global Navigation Bar" (aka top bar links) to this custom nav bar without hard-coding them. I am very new to SharePoint, but how can I do this? Can I reference the element in my custom code?

Any help is appreciated - thank you!

Custom Sharepoint Home

Improve this question
4
  • Are you using custom master page and would you like to show these top bar links as a left side menu in all pages or for only this particular page?
    – Dikesh Gandhi
    Commented Jul 23, 2019 at 12:06
  • It's fine if it's only for this particular page. The idea is that this will be the official home page, users can then see the pages they have access to and navigate to them.
    – Dgamelin
    Commented Jul 23, 2019 at 12:23
  • If you have custom master page, you can move delegate control of top navigation to left side and set CSS as per your need. Set JavaScript function in master page to display this new left navigation if current page is home page.
    – Dikesh Gandhi
    Commented Jul 23, 2019 at 12:29
  • I'm not very familiar with Master Pages.... I inserted a script editor web part and then added a custom html and css script to render the page. I was thinking/hoping I could reference the top bar links in my script.
    – Dgamelin
    Commented Jul 23, 2019 at 12:58

1 Answer 1

Reset to default
2

I can think of options, both of them would require you to write code.

Option 1 - Use jquery, and find the main div element which is rending top link bar. Further write logic to find all the links and its title from the dive element and create your custom html. add your custom html to left navigation container div. Hide top link bar main container div using jquery.

Option 2 - Use JSOM to get navigation bar links from web.navgiation.TopNavigatioBar object. Below is reference in CSOM, you might have to use similar objects in JSOM to get all the links. Once you got links, create your custom navigation html and append to left navigation container.

https://www.c-sharpcorner.com/blogs/how-to-get-all-the-nodes-from-the-top-navigation-bar-using-csom-in-sharepoint-2013

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.