SharePoint 2013 Branding: Collapsible Left Navigation

Let's see how we can make standard SharePoint left navigation control collapsible.

Simple version: you can hide all the 2nd level ul elements. Then you can show only the ul in the li marked with the .selected class.

#sideNavBox .ms-core-listMenu-verticalBox ul ul {
 display: none;
}

#sideNavBox .ms-core-listMenu-verticalBox ul li.selected ul {
 display: block;
}

The problem. SharePoint only sets the current item as selected. So if you're on a 2nd level page the navigation will be collapsed because the parent of this item will not be marked as selected.

We can use a bit of jQuery magic to fix this.

// closest() will also look at the element that it's being applied to, so we need to exclude it
jQuery("#sideNavBox li.selected").closest("#sideNavBox ul.root li.static:not(.selected)").addClass("selected");

You can apply a different class, but you'll need to update the CSS as well.

Let's see this in action:

"News" doesn't have children and is selected. "Organization" has children but it's collapsed
"News" doesn't have children and is selected. "Organization" has children but it's collapsed
Top level of "Organization" is selected
Top level of "Organization" is selected
A child of "Organization" is selected
A child of "Organization" is selected

Share this

Did you like this article? Share it!

Keep up to date

Our monthly newsletter. See previous editions.

Related articles