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) 

Try it out 

• Component Builder (to see how it works with your own content and images) 
• Dev Codepen (to experiment with all the code)

Sample patterns 

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