Left Navigation Configuration
The primary navigation for all sites should be the top navigation bar in the header. However, sometimes site complexity warrants the use of a secondary navigation, typically for a section of a website. While changing the top navigation is often the preferred method, it does sometimes make sense for the left navigation to the utilized, typically in a smaller section of a site or a very focused topic where it is highly likely users will want to visit mutliple pages in the section in a single session. The left navigation has the following elements to it: placement, title, links, optional buttons, and optional additional information.
Placement
The left navigation must be placed in a col-lg-3 column on the left side of the page. It must appear first on smaller mobile layouts. This type of navigation is meant to be recognizable across all USU sites and therefore should not be adjusted.
Title
The title of the left navigation is technically optional, but in almost all cases, the page will benefit from it being there. The title shouldn't change between pages where the navigation occurs and should only be created using HTML and not images, graphics or other elements.
Links
The left navigation links should use normal Bootstrap nav classes. The DOM and classes are important as there is styling that occurs. Multiple levels of collapses can be used for deep and complex navigations. Icons and graphics are not needed for the general nav link list for the left navigation.
Buttons
Sometimes you want a call to action for a section of your site and the left navigation is a great place for it. Typically just a link in the navigation is fine, but if you want to call a bit more attention to a specific link, consider adding a button below your links. While it's possible to add more than one, we generally recommend pages only have a single call to action, and therefore, only a single button if it is to be used.
Additional Information
The left nav area can function just like a sidebar, though it's a bit more narrow and will be collapsed on mobile. Still, it can make sense sometimes to add additional information below the navigation, which you can add inside the nav card or outside of it. The main guideline here is to be brief with the content and take care to position, size, and order your content so it doesn't take up too much space or draw too much attention.
