<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Navigation Bars - DND 5th Edition</title>
    
    
    
    <script type="text/javascript" src="https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--javascript/init.combined.js"></script>
    <script  type="text/javascript">
        var URL_HOST = 'www.wikidot.com';
        var URL_DOMAIN = 'wikidot.com';
        var USE_SSL =  true ;
        var URL_STATIC = 'https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327';
        // global request information
        
        var WIKIREQUEST = {};
        WIKIREQUEST.info = {};
        
        WIKIREQUEST.info.domain = "dnd5e.wikidot.com";
        WIKIREQUEST.info.siteId = 1475899;
        WIKIREQUEST.info.siteUnixName = "dnd5e";
        WIKIREQUEST.info.categoryId = 11887291;
        WIKIREQUEST.info.themeId = 2386862;
        WIKIREQUEST.info.requestPageName = "help:navigation-bars";
        OZONE.request.timestamp = 1755515706;
        OZONE.request.date = new Date();
        WIKIREQUEST.info.lang = 'en';
                WIKIREQUEST.info.pageUnixName = "help:navigation-bars";
        WIKIREQUEST.info.pageId = 48865956;
                        WIKIREQUEST.info.lang = "en";
        OZONE.lang = "en";
        var isUAMobile = !!/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    </script>
    
    


    
        <script  type="text/javascript">
    
        require.config({
            baseUrl: URL_STATIC + '/common--javascript',
            paths: {
                'jquery.ui': 'jquery-ui.min',
                'jquery.form': 'jquery.form'
            }
        });
    
    </script>
    
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
            
    
    
    
    
    <meta http-equiv="content-language" content="en"/>
    <script type="text/javascript" src="https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--javascript/WIKIDOT.combined.js"></script>
            <script type="text/javascript" src="https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--bootstrap/3.2.0/bootstrap.min.js"></script>
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
             <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        
        <link href="https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--fonts/awesome/3.2.1/font-awesome.min.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
    
    <style type="text/css" id="internal-style">
        
        /* modules */
        
                /* bootstrap */
            @import url(https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--bootstrap/3.2.0/bootstrap.min.css);
                
        /* theme */
                    @import url(https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--theme/bootstrap-base/css/style.css);
                    @import url(https://dnd5e.wdfiles.com/local--theme/standard-yellow/style.css);
            </style>
    
            <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        
        
        
    <link rel="shortcut icon" href="/local--favicon/favicon.gif"/>
    <link rel="icon" type="image/gif" href="/local--favicon/favicon.gif"/>
    
            <link rel="apple-touch-icon" href="/common--images/apple-touch-icon-57x57.png" />
        <link rel="apple-touch-icon" sizes="72x72" href="/common--images/apple-touch-icon-72x72.png" />
        <link rel="apple-touch-icon" sizes="114x114" href="/common--images/apple-touch-icon-114x114.png" />
        
        
            <link rel="alternate" type="application/wiki" title="Edit this page" href="javascript:WIKIDOT.page.listeners.editClick()"/>
    
        <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-18234656-1']);
        _gaq.push(['_setDomainName', 'none']);
        _gaq.push(['_setAllowLinker', true]);
        _gaq.push(['_trackPageview']);

        _gaq.push(['old._setAccount', 'UA-68540-5']);
        _gaq.push(['old._setDomainName', 'none']);
        _gaq.push(['old._setAllowLinker', true]);
        _gaq.push(['old._trackPageview']);

            </script>
    
    <script type="text/javascript">
        window.google_analytics_uacct = 'UA-18234656-1';
        window.google_analytics_domain_name = 'none';
    </script>
    
        <link rel="manifest" href="/onesignal/manifest.json" />
    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" acync=""></script>
    <script>
        var OneSignal = window.OneSignal || [];
        OneSignal.push(function() {
          OneSignal.init({
            appId: null,
          });
        });
    </script>
        
<style>
.admins-only, li.admins-only{  display: none; }
</style>
<script data-cfasync="false">window.nitroAds=window.nitroAds||{createAd:function(){return new Promise(e=>{window.nitroAds.queue.push(["createAd",arguments,e])})},addUserToken:function(){window.nitroAds.queue.push(["addUserToken",arguments])},queue:[]};</script>
<script data-cfasync="false" async src="https://s.nitropay.com/ads-143.js"></script>
<style>
.image-box .col-md-12 {
    padding: 0;
    float: none;
}
.image-box {
    border-radius: 6px;
    padding: 6px;
    border: 1px solid #E7E7E7;
    background: #FFF;
    margin: 1.25em;
}
.image-box * {  overflow: hidden; }
.image-box.image-box-middle,
.image-box.image-box-left,
.image-box.image-box-right {  margin: 4px auto; }
.image-box.image-box-left.force-float-true {
    margin: 4px 10px 4px 0;
    float: left;
}
.image-box.image-box-right.force-float-true {
    margin: 4px 0 4px 10px;
    float: right;
}
.image-box .image-box-heading {
    color: #777;
    background-color: #F2F2F2;
    text-align: center;
    letter-spacing: .5px;
    font-size: 110%;
    padding: .25em 1em;
    border-radius: 6px 6px 2px 2px;
    margin: 0 0 4px 0;
}
.image-box-modal .modal-header p {  margin: 0; }
.image-box-modal .image-box-heading {
    font-size: 125%;
    font-weight: 500;
}

.image-box .image-box-heading p {  margin: 0; }
.image-box .image-box-image {  margin: 0; }
.image-box .image-box-image p {  margin: 0; }
.image-box .image-box-image img,
.image-box-modal .image-box-image img {  margin: 0 auto; }
.image-box .image-box-link {
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 6px;
    display: block;
    width: 100%;
    transition: border-color 256ms linear;
    -moz-transition: border-color 256ms linear;
    -webkit-transition: border-color 256ms linear;
    -o-transition: border-color 256ms linear;
}
.image-box .image-box-link:hover {
    border-color: rgba(66, 139, 202, 1);
    text-decoration: none;
}
.image-box-modal .image-box-link[href=none] {  pointer-events: none; }
.image-box .image-box-caption {
    font-size: 80%;
    color: #999;
    text-align: center;
    margin: 4px 0 0 0;
}
.image-box-modal .image-box-caption {  text-align: center; }
.image-box .image-box-caption p:last-child,
.image-box-modal .image-box-caption p:last-child {  margin: 0; }
.image-box.image-box-primary {  border-color: #D9E8F4; }
.image-box.image-box-primary .image-box-heading {
    background-color: #428BCA;
    color: #FFF;
}
.image-box.image-box-primary .image-box-caption {  color: #428BCA; }
.image-box.image-box-info {  border-color: #DEF2F8; }
.image-box.image-box-info .image-box-heading {
    background-color: #5BC0DE;
    color: #FFF;
}
.image-box.image-box-info .image-box-link:hover {  border-color: #46B8DA; }
.image-box.image-box-info .image-box-caption {  color: #5BC0DE; }
.image-box.image-box-success {  border-color: #DEF1DE; }
.image-box.image-box-success .image-box-heading {
    background-color: #5CB85C;
    color: #FFF;
}
.image-box.image-box-success .image-box-link:hover {  border-color: #4CAE4C; }
.image-box.image-box-success .image-box-caption {  color: #5CB85C; }
.image-box.image-box-danger {  border-color: #F7DDDC; }
.image-box.image-box-danger .image-box-heading {
    background-color: #D9534F;
    color: #FFF;
}
.image-box.image-box-danger .image-box-link:hover {  border-color: #D43F3A; }
.image-box.image-box-danger .image-box-caption {  color: #D9534F; }
.image-box.image-box-warning {  border-color: #FCEFDC; }
.image-box.image-box-warning .image-box-heading {
    background-color: #F0AD4E;
    color: #FFF;
}
.image-box.image-box-warning .image-box-link:hover {  border-color: #EEA236; }
.image-box.image-box-warning .image-box-caption {  color: #F0AD4E; }

@media(min-width: 992px) {
    .image-box {  width: auto; }
    .image-box.image-box-left {
        margin: 4px 10px 4px 0;
        float: left;
        clear: left;
    }
    .image-box.image-box-right {
        margin: 4px 0 4px 10px;
        float: right;
        clear: right;
    }
}
</style>
<script type="text/javascript" src="https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--modules/js/misc/NewPageHelperModule.js"></script>
</head>
<body id="html-body">
<div id="skrollr-body">
<!---------------------------------------------------------
  Standard Template Layout
  Developed by the Wikidot Community
  Version: 1.01.141118
---------------------------------------------------------->
<a name="page-top"></a>

<div class="container-wrap-wrap">
<div class="container-wrap">
 
<header class="header-wrap" role="banner">
  <div class="container header">
    <div class="site-title">
      <h1><a href="/"><span>DND 5th Edition</span></a></h1>
      <h2><span>community wiki</span></h2>
    </div>
    <div class="login-status">
      <a href="javascript:;" onclick="WIKIDOT.page.listeners.createAccount(event)" class="login-status-create-account btn">Create account</a> <span>or</span> <a href="javascript:;" onclick="WIKIDOT.page.listeners.loginClick(event)" class="login-status-sign-in btn btn-primary">Sign in</a> 
    </div>
    <div id="search-top-box" class="form-search">
    <form id="search-top-box-form" action="dummy" class="input-append">
        <input id="search-top-box-input" class="text empty search-query" type="text" size="15" name="query" value="Search this site" onfocus="if(YAHOO.util.Dom.hasClass(this, 'empty')){YAHOO.util.Dom.removeClass(this,'empty'); this.value='';}"/><input class="button btn" type="submit" name="search" value="Search"/>
    </form>
</div>
  </div>
 
  
  <nav class="top-bar-wrap navbar navbar-default" role="navigation">
    <div class="container top-bar">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-top-target">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Home</a>
      </div>
      <div class="collapse navbar-collapse navbar-top-target">
        

<ul class="nav navbar-nav">
<li><a href="/main:about">About <span class="fa fa-info-circle"><span style="white-space: pre-wrap;">&nbsp;</span></span></a></li>
<li><a href="/system:join">Membership <span class="fa fa-user"><span style="white-space: pre-wrap;">&nbsp;</span></span></a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Help Docs <span class="fa fa-question-circle"><span style="white-space: pre-wrap;">&nbsp;</span></span></a>
<ul class="dropdown-menu">
<li><a href="/help:_home">User Guide</a></li>
<li><a href="/help:first-time-user">First Time User</a></li>
<li><a href="/help:quick-reference">Quick Reference</a></li>
<li><a href="/help:creating-pages">Creating Pages</a></li>
<li><a href="/help:editing-pages">Editing Pages</a></li>
<li><a href="/help:navigation-bars">Navigation Bars</a></li>
<li><a href="/help:using-modules">Using Modules</a></li>
<li><a href="/help:templates">Templates</a></li>
<li><a href="/help:css-themes">CSS Themes</a></li>
</ul>
</li>
<li class="dropdown admins-only"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="fa fa-cog"><span style="white-space: pre-wrap;">&nbsp;</span></span></a>
<ul class="dropdown-menu">
<li><a href="/_admin">Site Manager</a></li>
<li><a href="/nav:top">Edit Top Bar</a></li>
<li><a href="/nav:side">Edit Side Bar</a></li>
<li><a href="/css:_home">CSS Manager</a></li>
<li><a href="/system:recent-changes">Recent Changes</a></li>
<li><a href="/system:list-all-pages">List All Pages</a></li>
</ul>
</li>
</ul>



<div style="display : none;">
</div>

      </div>
    </div>
  </nav>
  
 
  <div class="header-extra-div-1"><span></span></div>
  <div class="header-extra-div-2"><span></span></div>
  <div class="header-extra-div-3"><span></span></div>
</header>
 
<main class="content-wrap" role="main">
  <div class="container content">
    <div class="row">
    
      <nav class="side-bar-wrap col-md-3">
        <div class="side-bar">
          <div class="side-bar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-side-target">
              <span>Menu</span>
            </button>
          </div>
          <div class="collapse navbar-collapse navbar-side-target">
            

<div class="text-center" style="margin-bottom: 12px;"><div class="error-block">You should be logged in to clone a site.</div></div>
<h1 ><span>Site Navigation</span></h1>
<ul>
<li><a href="/help:_home">User Guide</a></li>
<li><a href="/help:first-time-user">First Time User</a></li>
</ul>
<ul>
<li><a href="/main:about">About</a></li>
<li><a href="/main:contact">Contact</a></li>
<li><a href="/legal:_home">Legal</a></li>
<li><a href="/forum:start">Discussion Forums</a></li>
<li><a href="/system:members">Members</a></li>
</ul>
<h1 ><span>Create a Page</span></h1>

<div class="new-page-box" style="text-align: center; margin: 1em 0;">
	<form action="dummy.html" method="get" onsubmit="WIKIDOT.modules.NewPageHelperModule.listeners.create(event);">
		<input class="text" name="pageName" type="text" size="20" maxlength="128" style="margin: 1px"/>
				<input type="submit" class="button" value="New page" style="margin: 1px;"/>
																
	</form>
</div>

                    
            <!-- wikidot_below_sidebar_160x600 -->
<div id="wad-dnd5e-below-sidebar" class="wd-adunit wd-ad-np wd-adunit-below_sidebar"></div>
<script>
window['nitroAds'].createAd('wad-dnd5e-below-sidebar', {
  "refreshTime": 30,
  "renderVisibleOnly": false,
  "refreshVisibleOnly": true,
  "sizes": [ [ 160, 600 ] ],
  "report": {
    "enabled": true,
    "wording": "Report Ad",
    "position": "bottom-right"
  },
  "mediaQuery": "(min-width: 1000px)"
  });
</script>
        
    

            <div style="display: none"></div>
          </div>
        </div>
      </nav>
      
      <div class="main-content-wrap col-md-9">
      
        <div class="main-content">
          <div class="page-title page-header"><span>Navigation Bars</span></div>
          <div class="breadcrumbs"><a href="/help:_home">User Guide</a> &raquo; Navigation Bars</div>
          
        
            <!-- wikidot_top_728x90 -->
<div id="wad-dnd5e-above-content" class="wd-adunit wd-ad-np wd-adunit-above_content"></div>
<script>
window['nitroAds'].createAd('wad-dnd5e-above-content', {
  "refreshTime": 30,
  "renderVisibleOnly": false,
  "refreshVisibleOnly": true,
  "sizes": [ [ 728, 90 ] ],
  "report": {
    "enabled": true,
    "wording": "Report Ad",
    "position": "bottom-right"
  },
  "mediaQuery": "(min-width: 768px)"
  });
</script>
<div id="wad-dnd5e-above-content-mobile" class="wd-adunit wd-ad-np wd-adunit-above_content"></div>
<script>
window['nitroAds'].createAd('wad-dnd5e-above-content-mobile', {
  "refreshTime": 30,
  "renderVisibleOnly": false,
  "refreshVisibleOnly": true,
  "sizes": [ [ 320, 50 ], [320, 100] ],
  "report": {
    "enabled": true,
    "icon": true,
    "wording": "Report Ad",
    "position": "top-right"
  },
  "mediaQuery": "(min-width: 320px) and (max-width: 767px)"
  });
</script>
        
    

<div id="page-content">

<p>Wikidot allows you to have two navigation bars that can appear on every page. These bars are located on the top of the page and to the side, known as the Top Bar and Side Bar respectively. These are commonly used as navigational tools for users so that they may access various portions of your site with ease.</p>
<p>You may, of course, edit these to fit the purposes of your site. This page will give you a few tips and instructions when editing these bars.</p>
<table style="margin:0; padding:0">
<tr>
<td style="margin:0; padding:0">
<div id="toc">
<div id="toc-action-bar"><a href="javascript:;" onclick="WIKIDOT.page.listeners.foldToc(event)">Fold</a><a style="display: none" href="javascript:;" onclick="WIKIDOT.page.listeners.unfoldToc(event)">Unfold</a></div>
<div class="title">Table of Contents</div>
<div id="toc-list">
<div style="margin-left: 1em;"><a href="#toc0">The Top Bar</a></div>
<div style="margin-left: 2em;"><a href="#toc1">Dropdown Menues</a></div>
<div style="margin-left: 1em;"><a href="#toc2">The Side Bar</a></div>
<div style="margin-left: 2em;"><a href="#toc3">Hiding the Side Bar</a></div>
<div style="margin-left: 1em;"><a href="#toc4">Specialized Navigation Bars</a></div>
</div>
</div>
</td>
</tr>
</table>
<h1 id="toc0"><span>The Top Bar</span></h1>
<p>The Top Bar is likely the more important of the two navigational bars, as it is the one that will appear most obvious and intuitive for tablet and phone users. In order to access and alter this bar, you need to go to the <tt>nav:top</tt> page, linked to <a href="/nav:top">here</a> and in the default top bar that comes with this template. Then, you may edit it like any normal wiki page.</p>
<div class="alert alert-warning">
<p>When you edit it, you may see what appears to be a bunch of jumbled code. Do not become intimidated, though! We will walk you through how to interpret it.</p>
</div>
<p>The top bar is organized like a bulleted list, though to be compatible with Bootstrap, it uses a special syntax. The following would be a very simple top bar with just two links:</p>
<div class="code">
<pre>
<code>[[ul class=&quot;nav navbar-nav&quot;]]
  [[li]][/ Home][[/li]]
  [[li]][[[help:navigation-bars|Navigation Bars]]][[/li]]
[[/ul]]</code>
</pre></div>
<p>If you want to add another link, simply add the <tt><span style="white-space: pre-wrap;">[[li]]&#32;[[/li]]</span></tt> code in and insert your link in the middle. See, that's not too bad, right?</p>
<h2 id="toc1"><span>Dropdown Menues</span></h2>
<p>The primary reason the code on the default top bar looks so convoluted has to do with dropdown menues. As you may notice, whenever you click on &quot;Help Docs&quot;, a list of the various help pages appears. You may find this necessary for your purposes as well, so we'll touch on how to format a dropdown menu.</p>
<p>Dropdown menues consist of two parts:</p>
<ol>
<li>The Activation Link</li>
<li>The List of actual links</li>
</ol>
<p>Therefore, the code accounts for both of these parts.</p>
<p>The Activation Link is what is seen at the top bar itself. To place this, use the following template code:</p>
<div class="code">
<pre>
<code>[[li class=&quot;dropdown&quot;]]
[[a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;]]TEXT[[/a]][[ul class=&quot;dropdown-menu&quot;]]</code>
</pre></div>
<p>Simply replace <tt>TEXT</tt> with whatever you want the link to state.</p>
<p>As you may begin to notice, by declaring a separate <tt><span style="white-space: pre-wrap;">[[ul]]</span></tt> element at the end, the List of links is simply another specially formatted list of links like before. You can now add your links in like normal, being sure to encase each within <tt><span style="white-space: pre-wrap;">[[li]]</span></tt> tags.</p>
<p>Finally, end the list with the following code:</p>
<div class="code">
<pre>
<code>[[/ul]][[/li]]</code>
</pre></div>
<h1 id="toc2"><span>The Side Bar</span></h1>
<p>The Side Bar is the navigation bar that appears on the side of the site. On tablets and phones, however, there generally is not enough room on the screen to fit an entire side bar; therefore, the Standard Template moves the side bar to be directly over the content when viewed on mobile devices.</p>
<p>In order to edit the side bar, you need to access the <tt>nav:side</tt> page, linked to <a href="/nav:side">here</a> and in the default top bar that comes with this template. Then, you may edit it like any normal wiki page.</p>
<p>Unlike the top bar, the side bar need not follow any particular format. In general, though, it is best if you use a simple bulleted list like the one below:</p>
<div class="code">
<pre>
<code>* [[[link | Item 1]]]
* [[[link | Item 2]]]
* [[[link | Item 3]]]</code>
</pre></div>
<p>Many themes naturally account for a bulleted list in the side bar and have special code to handle it.</p>
<h2 id="toc3"><span>Hiding the Side Bar</span></h2>
<p>You may find that the Top Bar is entirely sufficient for your needs. In this case, you may not even desire having a side bar, and therefore you can have more room for your content. Thankfully, the Standard Template offers a very simple way to remove the side bar on a per-category basis.</p>
<p>The below represents a step-by-step process:</p>
<div class="row">
<div class="col-md-7">
<ol>
<li>Go to the <a href="/_admin">Site Manager</a>.</li>
<li>From the Dashboard, click on &quot;Appearance &amp; Behavior&quot;.</li>
<li>Look for the first option, called &quot;Themes&quot;.</li>
<li>After it completely loads, click on the tab called &quot;Custom&quot;.</li>
<li>Find the name of the theme you are using and click &quot;Edit&quot;</li>
<li>Uncheck the box that says &quot;Use side menu bar&quot;</li>
<li>Click the &quot;Save Theme&quot; button</li>
<li>After that, you're done!</li>
</ol>
</div>
<div class="col-md-5">
<div class="image-box image-box-middle force-float-false image-box-default" style="width: {$width}; max-width: {$max-width};">
<div class="col-md-12 image-box-heading" style="diNo Side Barne;">
<p>No Side Bar</p>
</div>
<div class="col-md-12 image-box-image" style="text-align: center;"><a class="image-box-link" data-toggle="modal" data-target="#u-nosidebar" href=""><img src="http://css.wikidot.com/local--files/csi:help-navigation-bars/nav_noSide.png" title="" class="img-responsive img-rounded" alt="Image Unavailable" width="{$width}" /></a></div>
<div class="col-md-12 image-box-caption" style="diThis is how it appears in the Site Managerne;">
<p>This is how it appears in the Site Manager</p>
</div>
</div>
<div id="u-nosidebar" class="image-box-modal modal fade" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header" style="diNo Side Barne;">
<p><span class="modal-title image-box-heading">No Side Bar<a class="close" data-dismiss="modal" href=""><span style="white-space: pre-wrap;">×</span></a></span></p>
</div>
<div class="modal-body">
<div class="image-box-image"><a class="image-box-link" href="http://css.wikidot.com/local--files/csi:help-navigation-bars/nav_noSide.png"><img src="http://css.wikidot.com/local--files/csi:help-navigation-bars/nav_noSide.png" title="" class="img-responsive img-rounded" alt="Image Unavailable" width="{$width}" /></a></div>
</div>
<div class="modal-footer" style="diThis is how it appears in the Site Managerne;">
<div class="image-box-caption">
<p>This is how it appears in the Site Manager</p>
</div>
</div>
</div>
</div>
</div>


</div>
</div>
<h1 id="toc4"><span>Specialized Navigation Bars</span></h1>
<p>In reality, you can actually have many different navigation bars, though only two may be used at a time per category. Wikidot allows you to specify different navigation bars for each category if you desire it. For example, if you want to have a different side bar for the &quot;blog&quot; category, you can create a new page called <tt>nav:side-blog</tt> and put the code for the customized side bar. Then, in the <a href="/_admin">Site Manager</a> under &quot;Appearance &amp; Behavior&quot; and &quot;Navigation elements&quot;, you can set the &quot;blog&quot; category to use <tt>nav:side-blog</tt> as its side bar.</p>
</div>




        
            <!-- floating video element -->
<div id="wad-dnd5e-floating-video" style="position: fixed; right: 0; bottom: 0;"></div>
<script>
window['nitroAds'].createAd('wad-dnd5e-floating-video', {
  "refreshTime": 30,
  "format": "floating",
  "mediaQuery": "(min-width: 1025px)"
  });
</script>
        
    


        
                        <!-- wikidot_bottom_300x250 -->
<div id="wad-dnd5e-below-content" class="wd-adunit wd-ad-np wd-adunit-below_content"></div>
<script>
window['nitroAds'].createAd('wad-dnd5e-below-content', {
  "refreshTime": 30,
  "renderVisibleOnly": false,
  "refreshVisibleOnly": true,
  "sizes": [ [ 300, 250 ] ],
  "report": {
    "enabled": true,
    "wording": "Report Ad",
    "position": "bottom-right"
  }
  });
</script>
                    
    


          
          <div class="page-info-break"></div>
          <div class="page-options-container"></div>
          <div id="action-area" style="display: none;"></div>
        </div>
      </div>
    </div>
  </div>
</main>
 
<footer class="footer-wrap" role="contentinfo">
  <div class="container footer">
    <div class="options" style="display: block; visibility: visible;">
    <a href="http://www.wikidot.com/doc" id="wikidot-help-button">Help</a>
    &nbsp;|
    <a href="http://www.wikidot.com/legal:terms-of-service" id="wikidot-tos-button">Terms of Service</a>
    &nbsp;|
    <a href="http://www.wikidot.com/legal:privacy-policy" id="wikidot-privacy-button">Privacy</a>
    &nbsp;|
    <a href="javascript:;" id="bug-report-button" onclick="WIKIDOT.page.listeners.pageBugReport(event)">Report a bug</a>
    &nbsp;|
    <a href="javascript:;" id="abuse-report-button" onclick="WIKIDOT.page.listeners.flagPageObjectionable(event)">Flag as objectionable</a>
    <span id="consent-box" style="display:none">
        &nbsp;|
        <a href="javascript:;"  onclick="window.__cmp('showModal');">Update cookie settings</a>
    </span>

    <script>
    if (window["nitroAds"] && window["nitroAds"].loaded) {
        document.getElementById("consent-box").style.display = window["__tcfapi"] ? "" : "none";
        } else {
        document.addEventListener(
                "nitroAds.loaded",
                () =>
                (document.getElementById("consent-box").style.display = window["__tcfapi"] ? "" : "none")
                );
    }
    </script>
</div>
Powered by <a href="http://www.wikidot.com">Wikidot.com</a>
    <div class="license-area">Unless otherwise stated, the content of this page is licensed under <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 License</a></div>
  </div>
  <div class="extrac-div-1"><span></span></div>
  <div class="extrac-div-2"><span></span></div>
  <div class="extrac-div-3"><span></span></div>
</footer>
 

</div> <!-- container-wrap -->
 
<div class="extra-div-1"><span></span></div>
<div class="extra-div-2"><span></span></div>
<div class="extra-div-3"><span></span></div>
<div class="extra-div-4"><span></span></div>
<div class="extra-div-5"><span></span></div>
<div class="extra-div-6"><span></span></div>
</div> <!-- container-wrap-wrap -->
</div>
<div id="dummy-ondomready-block" style="display: none;" ></div>
    <!-- Google Analytics load -->
    <script type="text/javascript">
        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>




<div id="page-options-bottom-tips" style="display: none;">
    <div id="edit-button-hovertip">
        Click here to edit contents of this page.    </div>
</div>
<div id="page-options-bottom-2-tips"  style="display: none;">
    <div id="edit-sections-button-hovertip">
        Click here to toggle editing of individual sections of the page (if possible).         Watch headings for an &quot;edit&quot; link when available.    </div>
    <div id="edit-append-button-hovertip">
        Append content without editing the whole page source.    </div>
    <div id="history-button-hovertip">
        Check out how this page has evolved in the past.    </div>
    <div id="discuss-button-hovertip">
        If you want to discuss contents of this page - this is the easiest way to do it.    </div>
    <div id="files-button-hovertip">
        View and manage file attachments for this page.    </div>
    <div id="site-tools-button-hovertip">
        A few useful tools to manage this Site.    </div>
    <div id="backlinks-button-hovertip">
        See pages that link to and include this page.    </div>
    <div id="rename-move-button-hovertip">
        Change the name (also URL address, possibly the category) of the page.    </div>
    <div id="view-source-button-hovertip">
        View wiki source for this page without editing.    </div>
    <div id="parent-page-button-hovertip">  
        View/set parent page (used for creating breadcrumbs and structured layout).    </div>
            <div id="abuse-report-button-hovertip">
            Notify administrators if there is objectionable content in this page.        </div>
        <div id="bug-report-button-hovertip">
            Something does not work as expected? Find out what you can do.        </div>
        <div id="wikidot-help-button-hovertip">
            General Wikidot.com documentation and help section.        </div>
        <div id="wikidot-tos-button-hovertip">
            Wikidot.com Terms of Service - what you can, what you should not etc.        </div>
        <div id="wikidot-privacy-button-hovertip">
            Wikidot.com Privacy Policy.          
        </div>
    </div>
</body>
</html>