Skip to main content

OSU Navbar

Ready
OSU navbar is a common element among all Ohio State websites.
The OSU navbar is required.
Branding guidelines require each website to have an Ohio State branded navigation bar.

The OSU navbar is located at the very top of an Ohio State website, providing links to the university homepage and other central resources. Links have been determined based on user analytics of previous OSU navbar versions and must not be modified or removed.

Example#

<nav id="osu-navbar" class="bux-osu-nav" aria-label="Ohio State links">
    <div class="bux-osu-nav__overlay"></div>
    <div class="bux-osu-nav__wrapper">
        <h2 class="visually-hidden">Ohio State navigation bar</h2>
        <div class="bux-container">
            <div id="osu-navname-block">
                <a class="bux-osu-nav__osu-logo-link" href="https://osu.edu">
                    <img class="bux-osu-nav__osu-logo-img" src="/images/osu-logos/navbar/osu-navbar.svg"
                        alt="The Ohio State University" />
                </a>
            </div>
            <div id="osu-navlinks-block">
                <button type="button" id="osu-nav-trigger" aria-controls="osu-navlinks" aria-expanded="false">
                    <span class="visually-hidden">Show Links</span>
                </button>
                <ul id="osu-navlinks" aria-labelledby="osu-nav-trigger" class="bux-osu-nav__links">
                    <li class="bux-osu-nav__link"><a href="https://www.osu.edu/map">Map</a></li>
                    <li class="bux-osu-nav__link"><a href="http://buckeyelink.osu.edu/">Buckeye Link</a></li>
                    <li class="bux-osu-nav__link"><a href="https://email.osu.edu/">Webmail</a></li>
                    <li class="bux-osu-nav__link"><a href="https://www.osu.edu/search/">Search Ohio State</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

Usage#

Dos#

  • Use as is
  • Use at the very top of every page of your website

Don'ts#

  • Don't modify or replace the Ohio State logo
  • Don't add, remove, or modify links

Implementation notes#

The OSU Navbar, along with the Header and Site Navigation should be enclosed by the <header> element.

Accessibility#

  • The Skip Navigation component must be the first component on the page, before the OSU navbar. The Skip Navigation will ordinarily be hidden unless it has keyboard focus.