Web Implementation Guidelines Group Component Builder Information (v3+)

Component: Section Nav 1.1

This builder will allow you to generate a custom version of the Section Nav component.

The component will show up in between the pink lines below. The pink lines will not show up in production -- they are only used to allow you to view margins and paddings. In the case of specialized components (things that are meant to be invisible or have a fixed location), the component may not display in this area.

Template -- enter raw HTML here

Attributes, Classes, and CSS Variables

(attribute)
Force to always collapse (true) or never collapse (false)
(attribute)
Set the menu to be open by default when collapsed
(text attribute)
Accessible label for the menu, and also the text of the toggle when collapsed
Custom CSS Variables and Styles (advanced use only)
Margin above when not collapsed [default: 1.5em]
Margin below when collapsed [default: 1.5em]
Bottom border when collapsed [default: 2px solid var(--il-blue)]
Line height for links [default: 1.2rem]
Normal link text color [default: var(--il-blue)]
Focused link text color [default: var(--il-blue)]
Hover link text color [default: var(--il-altgeld)]
Active link text color [default: var(--il-altgeld)]
Left indentation for levels [default: 0.9375rem]
Specific indentation for level 2 children [default: 1.5625rem]
First level children font size [default: 1.125rem]
Font size for all deeper children [default: 1rem]
Font weight for menu items [default: 600]
Height of a nav element [default: 2.75rem]
Top padding for a nav item [default: 0.7rem]
Right padding for a nav item [default: 0.625rem]
Bottom padding for a nav item [default: 0.7rem]
Left padding for a nav item [default: 1.25rem]
Top border for first level items [default: 1px solid var(--il-storm-lighter-3)]
Font size for the root link [default: 1.25rem]
Background for the root link [default: var(--il-storm-lighter-4)]
Font weight for the root link [default: 700]
Font size for the toggle when collapsed [default: 1rem]
Background for the toggle [default: #E8E9EB]
Font family for the toggle [default: var(--il-font-sans)]
Font weight for the toggle [default: 400]
Bottom border for the toggle [default: 1px solid var(--il-storm-lighter-3)]
Active background for the toggle [default: var(--il-arches-lighter-3)]
Symbol shown in front of the current page in the nav [default: "▸ "]
Size of the current page symbol [default: 0.35rem]
Left margin for the current page symbol [default: -0.6875rem]

HTML listed here

This parent has a style of that is not figured into the source HTML. You can change this by opening the Custom CSS Variables and Styles and editing the parent style.

Details

Secondary navigation for a section of a website.

Full Version: 1.1

Type: web component

Date Created: 2/18/2025

Version notes:

Github repository: https://github.com/web-illinois/ilw-section-nav/

Javascript file: https://cdn.toolkit.illinois.edu/ilw-section-nav/1.1/ilw-section-nav.js

CSS file: https://cdn.toolkit.illinois.edu/ilw-section-nav/1.1/ilw-section-nav.css

JSON information: ilw-section-nav.1.1.json

Web Implementation Guidelines Group Component Builder Information (v3+)

Note: this page is not using the toolkit because it is meant to test individual components in isolation.