# Navigation

# How it works

Mods are self-contained, reusable features, which makes them great for placing the same navigation element on multiple pages.

# Reusable navs

To add a navbar mod to a page, paste the mod into your HTML:

<!-- Bootstrap navbar -->
<div id="anymod-oorba"></div>

To add the navbar to multiple pages, paste the mod HTML onto each page.

TIP

Be sure to also paste the AnyMod script on pages where you want mods to show. See installing a mod for more info.

# Types of navs

There are dozens of navigation mods (opens new window) with different styles and layouts:

<!-- Material Design sidenav -->
<div id="anymod-aklor"></div>
<!-- Tabbed navigation -->
<div id="anymod-dmkon"></div>
<!-- Dropdown menu -->
<div id="anymod-mkldd"></div>

TIP

The mods above are live: click them to interact.

You can clone the above mods into your project if desired:

# Custom navigation

You can customize both the content of a mod as well as its code. That means you have complete control over the look and behavior of a mod.

And you only need to make a change once for it to show up across all of your pages.

Say we want to customize the Bootstrap navbar mod above. We can do so by adding some CSS rules and a brand image:

<!-- Bootstrap navbar (edited) -->
<div id="anymod-kodmb"></div>
Last Updated: 7/10/2019, 4:06:08 PM