Section Navigation on Base Toolkit - Version 2.13
Preview this component (Custom Element; v2.0.0; 7/12/2021)
Guidelines using the component
Description
The section navigation component provides extended navigation links for a section of a website, organized in a tree-like stucture. Compared to the main navigation, it provides more levels of navigation and more items at a glance, making it easier to browse the contents of a section of a website.
The section navigation is meant to be placed in a sidebar next to the main page content. On smaller screens, it collapsed to a dropdown widget labeled "In This Section".
Usage
The section navigation contains one area for content. It should contain:
- A heading that describes the content of the section, likely the title of the home page of the section. The heading should have the appropriate outline level (H2, H3, etc.) and may contain a link to a page.
- An unordered list of links that represent the contents of the site section. There is no hard limit to the levels of nesting for this list, but display issues may occur when exceeding 4 or 5 levels.
Current page
Use the aria-current attribute to denote the current page.
<a href="http://example.com/about" aria-current="page">About Us</a>
Layout
Use the "section with sidebar" layout component to place a section navigation in a sidebar
<il-section-with-sidebar>
<il-section-nav slot="sidebar">
<!-- Section navigation content would go here -->
</il-section-nav>
<!-- Main page content would go here -->
</il-section-with-sidebar>
Component Display
Change Your Content and Options
Template -- enter raw HTML here
Important Classes
N/A
Classes
N/A
Attributes
N/A
Advanced Options
These options are only to be used in advanced situations -- most of your needs should be met through the attributes and classes, and this breaks the intent of having a unified design.
Custom Style Tag before text
N/A
How to add it to your page
Copy and paste this in your page. Remember
- Make sure you have updated your component to make sure the below code is completed.
- Make sure you have the Header code in your header.
Note that this uses the custom style 'builder-custom'. You may need to change this if you are using multiple versions of this component with different styles.