HPUCSS Framework

Completed Navbar

The example below shows how a completed navbar looks like. To follow semantic UI, please use the HTML tag nav.

CURRENT SCREEN SIZE: xs sm md lg xl xxl

HTML


<nav class="hpu-nav" aria-label="Completed Navbar">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            <div class="nav-brand">
                <a href="..." class="nav-logo">
                    <img src="..." width="190">
                </a>

                <button type="button" class="nav-toggler" aria-expanded="false" aria-controls="navMenu1">
                    <span class="nav-toggler-icon"></span>
                </button>
            </div>

            <ul class="nav-list hover-fade" id="navMenu1" role="menu">
                <li class="nav-item" role="none">
                    <a href="..." class="nav-link hpu-text-uppercase" role="menuitem" aria-current="page">Home</a>
                </li>

                <li class="nav-item hpu-dropdown" aria-expanded="false" data-hpu="dropdown" role="none">
                    <a href="..." class="nav-link dropdown-toggle hpu-text-uppercase" aria-haspopup="true" aria-expanded="false" aria-controls="navSubMenu1" role="menuitem">
                        Academics
                    </a>

                    <div class="dropdown-wrap hpu-text-center-lg">
                        <ul class="dropdown-content" id="navSubMenu1" role="menu">
                            <li class="dropdown-item">
                                <a href="..." class="dropdown-link" role="menuitem" tabindex="0">
                                    Colleges
                                </a>
                            </li>

                            ...
                        </ul>
                    </div>
                </li>

                <li class="nav-item" role="none">
                    <a href="..." class="nav-link hpu-text-uppercase" role="menuitem">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Container Wrap

To ensure appropriate spacing in the Navbar, wrap the contents with either the .hpu-container to let the navbar contents stay in the middle, or .hpu-container-fluid to let the contents span across the navbar. Responsive container is also possible. Please refer to HPUCSS Container for usage guides.

CURRENT SCREEN SIZE: xs sm md lg xl xxl

HTML


<nav class="hpu-nav" aria-label="Navbar 2">
    <div class="hpu-container">
        ...
    </div>
</nav>

Navbar Brand

Contains the logo, name, or main identifying mark of a website or organization, usually position at the left side of the Navbar, and serves as a clickable link to redirect users to the homepage or the main landing page. Navbar brand can be a logo, text, or both.

CURRENT SCREEN SIZE: xs sm md lg xl xxl

With Image Logo:

With Text (with h1):

HPUCSS

With Image Logo and Text (with h1):

HPUCSS

HTML


<!-- Image Logo: -->
<nav class="hpu-nav" aria-label="Navbar 3a">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            <div class="nav-brand">
                <a href="..." class="nav-logo">
                    <img src="..." width="190">
                </a>

                <button type="button" class="nav-toggler" aria-expanded="false" aria-controls="...">
                    <span class="nav-toggler-icon"></span>
                </button>
            </div>
        </div>
    </div>
</nav>

<!-- Text with h1: -->
<nav class="hpu-nav" aria-label="Navbar 3b">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            <div class="nav-brand">
                <h1 class="nav-logo">HPUCSS</h1>

                <button type="button" class="nav-toggler" aria-expanded="false" aria-controls="...">
                    <span class="nav-toggler-icon"></span>
                </button>
            </div>
        </div>
    </div>
</nav>

<!-- Image Logo and Text with h1: -->
<nav class="hpu-nav" aria-label="Navbar 3c">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            <div class="nav-brand">
                <a href="..." class="nav-logo">
                    <img src="..." width="190">
                </a>

                <h1 class="nav-logo">HPUCSS</h1>

                <button type="button" class="nav-toggler" aria-expanded="false" aria-controls="...">
                    <span class="nav-toggler-icon"></span>
                </button>
            </div>
        </div>
    </div>
</nav>

The Nav Wrap

The .nav-wrap is the parent wrap for all of the visible items in a navbar. By default, without any expand classes, the navbar will look like this:

To let the Navbar expand on a specific device width, add the class .expand-{sm | md | lg | xl | xxl} alongside the .nav-wrap class. Try changing the width of your device to see the Navbar expand behavior.

CURRENT SCREEN SIZE: xs sm md lg xl xxl

.nav-wrap .expand-sm:

.nav-wrap .expand-md:

.nav-wrap .expand-lg:

.nav-wrap .expand-xl:

.nav-wrap .expand-xxl:

HTML


<!-- .expand-sm: -->
<nav class="hpu-nav" aria-label="Navbar 4a">
    <div class="hpu-container">
        <div class="nav-wrap expand-sm">
            ...
        </div>
    </div>
</nav>

<!-- .expand-md: -->
<nav class="hpu-nav" aria-label="Navbar 4b">
    <div class="hpu-container">
        <div class="nav-wrap expand-md">
            ...
        </div>
    </div>
</nav>

<!-- .expand-lg: -->
<nav class="hpu-nav" aria-label="Navbar 4c">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            ...
        </div>
    </div>
</nav>

<!-- .expand-xl: -->
<nav class="hpu-nav" aria-label="Navbar 4d">
    <div class="hpu-container">
        <div class="nav-wrap expand-xl">
            ...
        </div>
    </div>
</nav>

<!-- .expand-xxl: -->
<nav class="hpu-nav" aria-label="Navbar 4e">
    <div class="hpu-container">
        <div class="nav-wrap expand-xxl">
            ...
        </div>
    </div>
</nav>

Also, Navbar uses Flexbox for flexible alignment through the .flex-jc-{alignment} classes, which are applied together with the .nav-wrap class. On mobile devices, these Flexbox alignment classes are ignored, as the menu items stack vertically. Please refer to HPUCSS Flexbox Properties for usage guides.

.nav-wrap .flex-jc-start (default):

.nav-wrap .flex-jc-center-lg

.nav-wrap .flex-jc-end-lg

.nav-wrap .flex-jc-between-lg

.nav-wrap .flex-jc-around-lg

.nav-wrap .flex-jc-evenly-lg

HTML


<!-- .flex-jc-start: -->
<nav class="hpu-nav" aria-label="Navbar 4f">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg flex-jc-start">
            ...
        </div>
    </div>
</nav>

<!-- .flex-jc-center: -->
<nav class="hpu-nav" aria-label="Navbar 4g">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg flex-jc-center">
            ...
        </div>
    </div>
</nav>

<!-- .flex-jc-end: -->
<nav class="hpu-nav" aria-label="Navbar 4h">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg flex-jc-end">
            ...
        </div>
    </div>
</nav>

<!-- .flex-jc-between: -->
<nav class="hpu-nav" aria-label="Navbar 4i">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg flex-jc-between">
            ...
        </div>
    </div>
</nav>

<!-- .flex-jc-around: -->
<nav class="hpu-nav" aria-label="Navbar 4j">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg flex-jc-around">
            ...
        </div>
    </div>
</nav>

<!-- .flex-jc-evenly: -->
<nav class="hpu-nav" aria-label="Navbar 4k">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg flex-jc-evenly">
            ...
        </div>
    </div>
</nav>

The Nav List

The .nav-list is the wrap for the links in the Navbar. By default, Navbar links do not have hover effects (try hovering on the links):

HPUCSS Navbar features 3 kinds of hover effects:

.hover-fade
.hover-bg-{top | bottom | left | right | center-h | center-v}
.hover-border-{top | bottom}

The hover classes must be applied alongside the .nav-list class.

.nav-list .hover-fade

HTML


<nav class="hpu-nav" aria-label="Navbar 5a">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            <div class="nav-brand">
                ...
            </div>

            <ul class="nav-list hover-fade">
                ...
            </ul>
        </div>
    </div>
</nav>

.nav-list .hover-bg-top (Background transition from top to bottom)

.nav-list .hover-bg-bottom (Background transition from bottom to top)

.nav-list .hover-bg-left (Background transition from left to right)

.nav-list .hover-bg-right (Background transition from right to left)

.nav-list .hover-bg-center-h (Background transition from center and spans horizontally)

.nav-list .hover-bg-center-v (Background transition from center and spans vertically)

HTML


<!-- .hover-bg-top: -->
<nav class="hpu-nav" aria-label="Navbar 5b">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            <div class="nav-brand">
                ...
            </div>

            <ul class="nav-list hover-bg-top">
                ...
            </ul>
        </div>
    </div>
</nav>

<!-- .hover-bg-bottom: -->
<nav class="hpu-nav" aria-label="Navbar 5c">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            <div class="nav-brand">
                ...
            </div>

            <ul class="nav-list hover-bg-bottom">
                ...
            </ul>
        </div>
    </div>
</nav>

<!-- .hover-bg-left: -->
<nav class="hpu-nav" aria-label="Navbar 5d">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            <div class="nav-brand">
                ...
            </div>

            <ul class="nav-list hover-bg-left">
                ...
            </ul>
        </div>
    </div>
</nav>

<!-- .hover-bg-right: -->
<nav class="hpu-nav" aria-label="Navbar 5e">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            <div class="nav-brand">
                ...
            </div>

            <ul class="nav-list hover-bg-right">
                ...
            </ul>
        </div>
    </div>
</nav>

<!-- .hover-bg-center-h: -->
<nav class="hpu-nav" aria-label="Navbar 5f">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            <div class="nav-brand">
                ...
            </div>

            <ul class="nav-list hover-bg-center-h">
                ...
            </ul>
        </div>
    </div>
</nav>

<!-- .hover-bg-center-v: -->
<nav class="hpu-nav" aria-label="Navbar 5g">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            <div class="nav-brand">
                ...
            </div>

            <ul class="nav-list hover-bg-center-v">
                ...
            </ul>
        </div>
    </div>
</nav>

.nav-list .hover-border-top

.nav-list .hover-border-bottom

HTML


<!-- .hover-border-top: -->
<nav class="hpu-nav" aria-label="Navbar 5h">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            <div class="nav-brand">
                ...
            </div>

            <ul class="nav-list hover-border-top">
                ...
            </ul>
        </div>
    </div>
</nav>

<!-- .hover-border-bottom: -->
<nav class="hpu-nav" aria-label="Navbar 5i">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            <div class="nav-brand">
                ...
            </div>

            <ul class="nav-list hover-border-bottom">
                ...
            </ul>
        </div>
    </div>
</nav>

It is also possible to change the positioning of the Navbar menus under the .nav-list by using horizontal auto margins: .hpu-{ml | mr}-auto.

.nav-list .hpu-ml-auto

.nav-list .hpu-mr-auto (if the Navbar brand is on the right using the flex class .flex-jc-end):

HTML


<!-- .nav-list .hpu-ml-auto: -->
<nav class="hpu-nav" aria-label="Navbar 5j">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            <div class="nav-brand">
                ...
            </div>

            <ul class="nav-list hpu-ml-auto">
                ...
            </ul>
        </div>
    </div>
</nav>

<!-- .nav-list .hpu-mr-auto: -->
<nav class="hpu-nav" aria-label="Navbar 5k">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg flex-jc-end">
            <ul class="nav-list hpu-ml-auto">
                ...
            </ul>

            <div class="nav-brand">
                ...
            </div>
        </div>
    </div>
</nav>

Lastly, links can also be aligned on either top or bottom of the nav-item's container. Simply add top or bottom class alongside the nav-list class. By default, links are center aligned vertically.

.nav-list .top

.nav-list (default)

.nav-list .bottom

HTML


<!-- .nav-list .top: -->
<nav class="hpu-nav" aria-label="Navbar 5l">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            <div class="nav-brand">
                ...
            </div>

            <ul class="nav-list top hover-fade">
                ...
            </ul>
        </div>
    </div>
</nav>

<!-- .nav-list (default): -->
<nav class="hpu-nav" aria-label="Navbar 5m">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            <div class="nav-brand">
                ...
            </div>

            <ul class="nav-list hover-fade">
                ...
            </ul>
        </div>
    </div>
</nav>

<!-- .nav-list bottom: -->
<nav class="hpu-nav" aria-label="Navbar 5n">
    <div class="hpu-container">
        <div class="nav-wrap expand-lg">
            <div class="nav-brand">
                ...
            </div>

            <ul class="nav-list bottom hover-fade">
                ...
            </ul>
        </div>
    </div>
</nav>

Navbar Colors

Color scheme used for the Navbar's background color: .nav-bg-{color-order} Navbar Colors still follow the HPUCSS color policies. Please refer to HPUCSS Colors for more usage guides. Color classes must be applied alongside .hpu-nav wrapper class.

.hpu-nav .nav-bg-1st

.hpu-nav .nav-bg-2nd

.hpu-nav .nav-bg-3rd

.hpu-nav .nav-bg-4th

.hpu-nav .nav-bg-5th

.hpu-nav .nav-bg-6th

.hpu-nav .nav-bg-7th

.hpu-nav .nav-bg-8th

HTML


<!-- Teal: -->
<nav class="hpu-nav nav-bg-1st" aria-label="Teal Navbar">...</nav>

<!-- Light Teal: -->
<nav class="hpu-nav nav-bg-2nd" aria-label="Light Teal Navbar">...</nav>

<!-- Blue Gray: -->
<nav class="hpu-nav nav-bg-3rd" aria-label="Blue Gray Navbar">...</nav>

<!-- Ocean Blue: -->
<nav class="hpu-nav nav-bg-4th" aria-label="Ocean Blue Navbar">...</nav>

<!-- Blue: -->
<nav class="hpu-nav nav-bg-5th" aria-label="Blue Navbar">...</nav>

<!-- Warm Sun: -->
<nav class="hpu-nav nav-bg-6th" aria-label="Warm Sun Navbar">...</nav>

<!-- Leaf Green: -->
<nav class="hpu-nav nav-bg-7th" aria-label="Leaf Green Navbar">...</nav>

<!-- Sunset: -->
<nav class="hpu-nav nav-bg-8th" aria-label="Sunset Navbar">...</nav>

Navbar Positioning

Method of placing and aligning a Navbar within a webpage. HPUCSS Navbar features 4 positioning types: .fixed-top, .fixed-bottom, .sticky-top, and sticky-bottom. Positioning classes must be placed alongside .hpu-nav class also.

.hpu-nav .fixed-top:

.hpu-nav .fixed-bottom:

.hpu-nav .sticky-top:

.hpu-nav .sticky-bottom:

HTML


<nav class="hpu-nav fixed-top" aria-label="Fixed Top Navbar">...</nav>
<nav class="hpu-nav fixed-bottom" aria-label="Fixed Bottom Navbar">...</nav>
<nav class="hpu-nav sticky-top" aria-label="Sticky Top Navbar">...</nav>
<nav class="hpu-nav sticky-bottom" aria-label="Sticky bottom Navbar">...</nav>