# 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>
TIP
Compare the changes: before (opens new window) and after (opens new window).