Illinois web toolkit documentation

Version 2.7.3

Component

Menu Navigation

Description 

The Illinois Theme menu navigation components offer consistently styled interactive elements to create a simple menu structure. (As of February 2022, the “megamenu” variation of navigation is still under design and development.) 

What it looks like 

Example image (version 2.3, Oct. 5, 2021) 

A three item menu with the middle menu opened to show three more choices

Try it out 

Sections only

This is an example of a single level menu without drop-down elements. Replace elements in bold with your own content. In this case, you use il-nav-link elements to define what is in your menu.

<il-nav slot="navigation"> 
    <il-nav-link> 
        <a id="link-1" href="your URL">Link 1</a> 
    </il-nav-link> 
    <il-nav-link> 
        <a id="link-2" href="next URL">Link 2</a> 
    </il-nav-link> 
    <il-nav-link> 
        <a id="link-3" href="third URL">Link 3</a> 
    </il-nav-link> 
</il-nav>

Menu with submenus

This is a menu in which some of the menu items have submenus. If you want to add submenus, use il-nav-section rather than il-nav-link at the top level, and then create an unordered list of items within the il-nav-section to contain the submenu.

<il-nav slot="navigation"> 
    <il-nav-section id="section-1"> 
        <a id="link-1" href="your URL here" slot="label">Link 1</a> 
        <ul id="list-1" class="il-subnav"> 
            <li><a id="link-1A" href="your URL here">Link 1A</a></li> 
        </ul> 
    </il-nav-section> 
    <il-nav-section id="section-2"> 
        <a id="link-2" href="your URL here" slot="label">Link 2</a> 
        <ul id="list-2" class="il-subnav"> 
            <li><a id="link-2A" href="your URL here">Link 2A</a></li> 
            <li><a id="link-2B" href="your URL here">Link 2B</a></li> 
            <li><a id="link-2C" href="your URL here">Link 2C</a></li> 
        </ul> 
    </il-nav-section> 
    <il-nav-section id="section-3"> 
        <a id="link-3" href="your URL here" slot="label">Link 3</a> 
        <ul id="list-3" class="il-subnav"> 
            <li><a id="link-3A" href="your URL here">Link 3A</a></li> 
        </ul> 
    </il-nav-section> 
</il-nav>

Syntax guide 

In the examples below, replace the elements in bold with your own content.

il-nav 

  • Syntax:
    <il-nav slot="navigation"> 
         One or more <il-link> or <il-section> elements in here
    </il-nav>
  • Value: The container which encloses your menu elements  
  • Default value: Nothing  
  • Required: Yes, you must have at least one <il-nav> container with contents inside it to make a menu.

il-nav-link

  • Syntax:
    <il-nav-link> 
        <a id="link-1" href="your URL here">Link 1</a> 
    </il-nav-link>
  • Value: Use <il-nav-link> to define and link a menu item which doesn’t have a submenu. 
  • Default value: None
  • Required: Yes, you must have either an <il-nav-link> item or an <il-nav-section> item inside your <il-nav> to create a menu. 
  • Duplicate: Yes, as many as needed subject to the width of the page 

il-nav-section

  • Syntax:
    <il-nav-section id="section-1"> 
        <a id="link-1" href="your URL here" slot="label">Link 1</a> 
        <ul id="list-1" class="il-subnav"> 
            <li><a id="link-1A" href="your URL here">Link 1A</a></li> 
        </ul> 
    </il-nav-section> 
  • Elements:
    • Use <il-nav-section> to define the start of a menu with a dropdown submenu.
    • Use an <a> tag with a slot=label attribute to identify the item which will be at the root of the menu.
    • Use <ul><li> elements to contain the items in the submenu. The <ul> should be marked with the class il-subnav.
    • Each element should contain a unique ID 
  • Default value: None
  • Required: Yes, you must have either an <il-nav-link> item or an <il-nav-section> item inside your <il-nav> to create a menu.  
  • Duplicate: Yes, as many as needed 

Slots

  • Syntax:
<il-nav slot="navigation">
  <il-nav-section>
     <a id="link-1" href="your URL here" slot="label">Link 1</a>
     Submenu UL and LI items here (see il-subnav syntax below)
  </il-nav-section>
</il-nav>  
  • Elements:
    • <il-nav> must contain the attribute slot="navigation" in order to display correctly.
    • Any menu item which contains submenus must have slot="label" applied to the a item which appears in the menu root (i.e., the item that will be toggle-able to expand or collapse the submenu). In the example above, this includes links 1, 2, and 3, but not the submenu items 1a, 2a, etc.
  • Default value: None
  • Required: Yes 
  • Duplicate: You don’t need to duplicate slot="navigation". You will need to duplicate slot="label" for each top level menu item that expands to show a submenu.

CSS options 

il-subnav 

  • Syntax:
        <ul id="list-1" class="il-subnav"> 
            <li><a id="link-1A" href="your URL here">Link 1A</a></li> 
        </ul> 
  • Elements:
    • <il-nav-section> must contain an unordered list with the class il-subnav applied to it.
  • Default value: None
  • Required: No 
  • Duplicate:
    • Repeat <li> items to add more entries to your sub-navigation menu.

About this component 

  • Type: Component 
  • Introduced in: v2.3.0; 9/29/2021 
  • Deprecated?: No