Create custom left navigation with Bootstrap 3 in SharePoint 2013 to show all pages in a Subsite

0
votes

I want to use the accordion class in Bootstrap 3 in SharePoint 2013 to customize the left navigation bar dynamically. The structure in SP is like:

  • Subsite
    • Subsite 2
      • Pages Folder
        • Folder 1
          • Page 1
          • Page 2
        • Folder2
          • Page 3
          • Page 4
        • etc

So when I enter Subsite 2, I want it to list the folders under this Subsite (Folder 1 and Folder 2 will show). And the Bootstrap accordion class will make it that if I click on Folder 1, it will expand and show the content (Page 1 and Page 2). Then, if i click on Folder 2, it will expand and show the content (Page 3 and 4), while Folder 1 will collapse.

But enough about the bootstrap-class. So the question is, how can I show the content dynamically , what SharePoint-code should I use? Because as standard, SharePoint doesn't list content (pages in this case) under folders. And if I use the standard-code for left navigation, I won't be able to customize it as I want.

Thanks!

2
twitter-bootstrapsharepointcustomizationquicklaunch

2 Answers

0
votes

Try this how to article. It doesn't require the use of bootstrap. http://msdn.microsoft.com/en-us/library/office/ms466994(v=office.14).aspx

0
votes

You need to create a subsite for each level deep you want to go to display subsite pages in a fly out menu:

"One common question that comes up with SharePoint Server publishing sites is whether you can manually create multiple levels of dynamic navigation items from the Navigation Settings page. This menu only allows you to manually create one level of heading that has one level of links below it. This means that you can create only one level of dynamic drop-downs or fl y-outs manually. If you want more levels of dynamic navigation, you must create the subsites and subsubsites that correspond to the navigation you want to show."

And on the master page, you have to ensure your AspMenu (either top or current nav) has the number of levels you want to display by updating the MaximumDynamicDisplayLevels property.