Menu Demo

Active State

The active/current page should always have the class "active" attached to its menu link. It will appear darker than the other links. Alternatively, you can specify a different css selector to apply the active state. In Drupal 8 all the links use the "is-active" class, so you would use the active-selector attribute to change which element gets the darker styling. Note that this is a css selector, not a class name, so if you're using a class name you'll need to prefix it with a '.'

Six Links

Dropdown Menus

This version of the byu-menu does not restrict the usage of dropdown menus. Though, because these elements would be in the light DOM, we do not style them with the provided package of components. It is up to the end user to style them in a way compliant with the BYU brand standards.

The following code is an example of a dropdown menu with our components. This code is a proof-of-concept and not accessible or mobile friendly. Do not copy this code without the appropriate edits.

This is the CSS we've included on this page to make the dropdown function. This example required no Javascript.

        .dropdown {
            position: relative;
            display: inline-block;
            z-index: 10;
        }
        .dropdown-btn {
            border: none;
            color: #002E5D;
            background-color: white;
            font-family: 'HCo Ringside Narrow SSm', Arial, sans-serif;
            font-size: 16px;
            height: 32px;
        }
        .dropdown-btn:hover {
            background-color: #e6e6e6;
        }
        .dropdown-child {
            display: none;
            min-width: 200px;
            position: absolute;
            background-color: white;
            box-shadow: 0 4px 8px #c5c5c5;
        }
        .dropdown-child a {
            color: #002e5d;
            font-size: 16px;
            padding: 12px;
            text-decoration: none;
            display: block;
        }
        .dropdown-child a:hover {
            background-color: #e6e6e6;
        }
        .dropdown:hover .dropdown-child {
            display: block;
            background-color: white;
        }