<section>
|
<h1 class="blue" data-id="#basics/navbar"><i class="ace-icon fa fa-desktop grey"></i> Navbar</h1>
|
|
<div class="hr hr-double hr32"></div>
|
<!-- #section:basics/navbar -->
|
<h2 class="blue lighter help-title" data-id="#basics/navbar.layout">
|
Navbar Basics
|
</h2>
|
|
|
<!-- #section:basics/navbar.layout -->
|
<div class="help-content">
|
<h3 class="info-title smaller">1. Layout</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Default HTML layout used for navbar is:
|
<div>
|
<span class="thumbnail inline">
|
<img src="images/navbar.png" />
|
</span>
|
</div>
|
<ol>
|
<li>
|
<b>toggle buttons</b>: come before brand text container(<code>.navbar-header</code>) or inside it.
|
</li>
|
<li>
|
<b>.navbar-header</b>: brand text container.
|
</li>
|
<li>
|
<b>.navbar-menu</b>: optional element which contains a menu or form.
|
</li>
|
<li>
|
<b>.navbar-buttons.navbar-header</b>: contains user info buttons and dropdowns.
|
</li>
|
</ol>
|
|
<div class="space-4"></div>
|
<pre data-language="html">
|
<div id="navbar" class="navbar navbar-default">
|
<div id="navbar-container" class="navbar-container">
|
|
<!-- toggle buttons are here or inside brand container -->
|
|
<div class="navbar-header pull-left">
|
<!-- brand text here -->
|
</div><!-- /.navbar-header -->
|
|
|
<div class="navbar-buttons navbar-header pull-right ">
|
<ul class="nav ace-nav">
|
<!-- user buttons such as messages, notifications and user menu -->
|
</ul>
|
</div><!-- /.navbar-buttons -->
|
|
|
<nav class="navbar-menu pull-left">
|
<!-- optional menu & form inside navbar -->
|
</nav><!-- /.navbar-menu -->
|
|
</div><!-- /.navbar-container -->
|
</div><!-- /.navbar -->
|
</pre>
|
</li>
|
|
<li>
|
Starting with the following file you can find more details:
|
<br />
|
<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>navbar.mustache</code>
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
|
|
<h3 class="info-title smaller" data-id="#basics/navbar.mobile">2. Responsive Navbar</h3>
|
<!-- #section:basics/navbar.mobile -->
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
There are two styles of responsive (mobile view) navbar:
|
<ol class="spaced">
|
<li>
|
Default style in which buttons move down when screen is small and below <b>480px</b>.
|
<br />
|
<span class="thumbnail inline">
|
<img src="images/navbar-mobile1.png" />
|
</span>
|
<br />
|
You can change this value by modifying <code>@screen-topbar-down</code> variable
|
at <code>assets/css/less/variables.less</code> and re-compile <code>ace.less</code>.
|
</li>
|
<li>
|
Bootstrap collapse style in which user buttons & dropdowns are hidden and
|
when screen is below <b>992px</b>, toggle buttons are used to hide/show them.
|
<br />
|
|
<span class="thumbnail inline">
|
<img src="images/navbar-mobile2.png" />
|
</span>
|
|
<br />
|
<i class="fa fa-hand-o-right"></i>
|
You can change <b>992px</b> to something else,
|
please see the note at <a href="#files/css.bootstrap" class="help-more">CSS section</a>
|
|
<div class="space-6"></div>
|
To enable this mobile style:
|
<ul>
|
<li>
|
Add necessary <a href="#basics/navbar.toggle" class="help-more">toggle buttons</a>
|
</li>
|
<li>
|
Add <code>.navbar-collapse</code> class to <code>.navbar</code> element
|
</li>
|
<li>
|
Add <code>.navbar-collapse</code> and <code>.collapse</code>
|
class to <code>.navbar-buttons</code> element
|
</li>
|
|
<li>
|
If there are is a navbar menu or form, you should add <code>.navbar-collapse</code> and <code>.collapse</code>
|
class to <code>.navbar-menu</code> element
|
</li>
|
</ul>
|
|
|
<pre data-language="html">
|
<div id="navbar" class="navbar navbar-default navbar-collapse">
|
<div id="navbar-container" class="navbar-container">
|
|
<div class="navbar-header pull-left">
|
<!-- brand text here -->
|
</div><!-- /.navbar-header -->
|
|
|
<div class="navbar-buttons navbar-header pull-right
|
navbar-collapse collapse">
|
<ul class="nav ace-nav">
|
<!-- user buttons such as messages, notifications and user menu -->
|
</ul>
|
</div><!-- /.navbar-buttons -->
|
|
|
<nav class="navbar-menu pull-left
|
navbar-collapse collapse">
|
<!-- optional menu & form inside navbar -->
|
</nav><!-- /.navbar-menu -->
|
|
</div><!-- /.navbar-container -->
|
</div><!-- /.navbar -->
|
</pre>
|
|
</li>
|
</ol>
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
<!-- /section:basics/navbar.mobile -->
|
|
|
<h3 class="info-title smaller">3. Navbar options</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
<ol class="spaced">
|
<li>
|
For fixed navbar you should add <code>.navbar-fixed-top</code> class to <code>.navbar</code> element.
|
<br />
|
See <a href="#settings.page" class="help-more">Page Settings</a> for more info.
|
</li>
|
<li>
|
For navbar inside <b>.container</b> you should add <code>.container</code> class to <code>.navbar-container</code> element.
|
<br />
|
See <a href="#settings.page" class="help-more">Page Settings</a> for more info.
|
</li>
|
<li>
|
When sidebar is horizontal you should add <code>.h-navbar</code> class to <code>.navbar</code> element.
|
<br />
|
See <a href="#basics/sidebar.horizontal" class="help-more">Horizontal Menu</a> for more info.
|
</li>
|
</ol>
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
|
|
|
<h3 class="info-title smaller" data-id="#basics/navbar.layout.brand">4. Brand</h3>
|
<!-- #section:basics/navbar.layout.brand -->
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Brand text is inside <code>.navbar-header</code> container and has the following markup:
|
<pre data-language="html">
|
<div class="navbar-header pull-left">
|
<a href="#" class="navbar-brand">
|
<small>
|
<i class="ace-icon fa fa-leaf"></i>
|
Brand Text
|
</small>
|
</a>
|
</div>
|
</pre>
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
<!-- /section:basics/navbar.layout.brand -->
|
|
</div><!-- /.help-content -->
|
<!-- /section:basics/navbar.layout -->
|
|
|
|
|
|
<div class="hr hr-double hr32"></div>
|
<h2 class="help-title blue lighter" data-id="#basics/navbar.dropdown">
|
User Buttons/Dropdowns
|
</h2>
|
<div class="space-4"></div>
|
|
<!-- #section:basics/navbar.dropdown -->
|
<div class="help-content">
|
<h3 class="info-title smaller">1. Overview</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
User buttons & dropdowns are inside <code>.navbar-buttons</code> element, inside a <code>ul.ace-nav</code> list:
|
<div class="space-4"></div>
|
<pre data-language="html">
|
<div class="navbar-buttons navbar-header pull-right">
|
<ul class="nav ace-nav">
|
|
<li class="light-blue">
|
|
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
|
<i class="ace-icon fa fa-tasks"></i>
|
<span class="badge">5</span>
|
</a>
|
|
<ul class="dropdown-menu dropdown-navbar dropdown-menu-right dropdown-caret dropdown-close">
|
<li class="dropdown-header">
|
title text
|
</li>
|
|
<li>
|
item#1.
|
</li>
|
<li>
|
item#2.
|
</li>
|
|
<li class="dropdown-footer">
|
bottom text or link
|
</li>
|
</ul>
|
|
</li>
|
|
|
<li>
|
Another button and dropdown
|
</li>
|
|
</ul>
|
</div>
|
</pre>
|
|
|
|
|
For an example see :
|
<br />
|
<code data-open-file="html" class="open-file"><span class="brief-name">mustache/app/views/layouts/partials/_shared/navbar/</span>tasks.mustache</code>
|
|
<br />
|
<code data-open-file="html" class="open-file"><span class="brief-name">mustache/app/views/layouts/partials/_shared/navbar/</span>notifications.mustache</code>
|
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
|
|
<h3 class="info-title smaller">2. Button & Menu colors</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li class="spaced2">
|
There are some colors and options for user dropdown buttons:
|
<br />
|
<ol>
|
<li>Default dark blue color</li>
|
<li><code>grey</code></li>
|
<li><code>purple</code></li>
|
<li><code>green</code></li>
|
<li><code>light-blue</code></li>
|
<li><code>light-blue2</code></li>
|
<li><code>red</code></li>
|
<li><code>light-green</code></li>
|
<li><code>light-purple</code></li>
|
<li><code>light-orange</code></li>
|
<li><code>light-pink</code></li>
|
<li><code>dark</code></li>
|
<li><code>white-opaque</code></li>
|
<li><code>dark-opaque</code></li>
|
<li><code>transparent</code></li>
|
<li><code>light-10</code></li>
|
<li><code>dark-10</code></li>
|
|
<li class="space-6"></li>
|
|
<li><code>margin-1</code></li>
|
<li><code>margin-2</code></li>
|
<li><code>margin-3</code></li>
|
<li><code>margin-4</code></li>
|
|
<li class="space-6"></li>
|
|
<li><code>no-border</code></li>
|
</ol>
|
|
<pre data-language="html">
|
<li class="light-pink no-border margin-1">
|
<!-- dropdown content goes here -->
|
</li>
|
</pre>
|
|
<div class="alert alert-info">
|
<i class="fa fa-hand-o-right bigger-125"></i>
|
When you change a skin using settings box options,
|
some of the navbar user buttons inside <code>.ace-nav > li</code> may get a different color.
|
<div class="space-4"></div>
|
The color is dynamically changed by switching to one of the above mentioned
|
color classes using Javascript and is not dependent on that specific skin.
|
<br />
|
You may want to hard code any button color of choice in your HTML without using Javascript.
|
</div>
|
|
</li>
|
|
<li>
|
And there are some different colors for dropdowns:
|
<br />
|
<ol>
|
<li>Default blue color</li>
|
<li><code>navbar-pink</code></li>
|
<li><code>navbar-grey</code></li>
|
<li><code>navbar-green</code></li>
|
</ol>
|
<pre data-language="html">
|
<li class="purple">
|
<a href="#">
|
...
|
</a>
|
<ul class="dropdown-navbar navbar-pink dropdown-menu dropdown-menu-right dropdown-caret dropdown-close">
|
...
|
</ul>
|
</li>
|
</pre>
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
|
|
<h3 class="info-title smaller">3. Mobile (responsive) User Menus</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Please refer to <a href="#basics/navbar.mobile" class="help-more">responsive navbar</a> for more info.
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
|
|
<h3 class="info-title smaller" data-id="#basics/navbar.dropdown-content">4. .dropdown-content & Scrollbars</h3>
|
<!-- #section:basics/navbar.dropdown-content -->
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
You can put the dropdown's main content inside <code>.dropdown-content</code> element.
|
<br />
|
This way you can have scrollbars on content:
|
<div>
|
<span class="thumbnail inline">
|
<img src="images/scroll-content.png" />
|
</span>
|
</div>
|
|
<pre data-language="html">
|
<li class="purple">
|
<ul class="dropdown-navbar dropdown-menu dropdown-menu-right">
|
<li class="dropdown-header"></li>
|
|
<li class="dropdown-content">
|
<ul class="dropdown-menu dropdown-navbar">
|
<!-- content and list of items are here -->
|
</ul>
|
</li>
|
|
<li class="dropdown-footer"></li>
|
</ul>
|
</pre>
|
</li>
|
|
<li>
|
Inside <code>assets/js/ace/ace.js</code> is the code to automatically apply scrollbars on <code>.dropdown-content</code> element.
|
<br />
|
Default content height is <b>200px</b>. You can change this using <code>data-size</code> attribute:
|
<pre data-language="html">
|
<li class="dropdown-content" data-size="250">
|
|
</li>
|
</pre>
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
<!-- /section:basics/navbar.dropdown-content -->
|
|
|
|
<h3 class="info-title smaller" data-id="#basics/navbar.tabbed">5. Tabbed dropdown</h3>
|
<!-- #section:basics/navbar.tabbed -->
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
You can use a <a href="#elements.tab" class="help-more">tab element</a> inside dropdown.
|
<br />
|
As an example you can see <b>top menu</b> page:
|
<div>
|
<span class="thumbnail inline no-margin-bottom">
|
<img src="images/tabbed-dropdown.png" />
|
</span>
|
</div>
|
<br />
|
Inside each <code>.tab-pane</code> you should use a <code>.dropdown-menu</code>:
|
|
<pre data-language="html">
|
<ul class="nav ace-nav">
|
<li class="light-blue">
|
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
|
<i class="ace-icon fa fa-bell icon-animated-bell"></i>
|
</a>
|
|
<!-- it should be a "DIV.dropdown-menu" here not a "UL.dropdown-menu" -->
|
<div class="dropdown-navbar dropdown-menu dropdown-menu-right dropdown-caret dropdown-close">
|
<div class="tabbable">
|
|
<!-- tab buttons here -->
|
<ul class="nav nav-tabs">
|
<li class="active">
|
<a data-toggle="tab" href="#navbar-tasks">
|
Tasks
|
<span class="badge badge-danger">4</span>
|
</a>
|
</li>
|
<li>
|
<a data-toggle="tab" href="#navbar-messages">
|
Messages
|
<span class="badge badge-danger">5</span>
|
</a>
|
</li>
|
</ul><!-- .nav-tabs -->
|
|
|
<!-- tab content here -->
|
<div class="tab-content">
|
|
<div id="navbar-tasks" class="tab-pane in active">
|
<!-- first tab pane and the .dropdown-menu inside it -->
|
<ul class="dropdown-navbar dropdown-menu dropdown-menu-right">
|
<li>
|
item # 1
|
</li>
|
<li>
|
item # 2
|
</li>
|
|
<li class="dropdown-footer">
|
...
|
</li>
|
</ul>
|
</div><!-- /.tab-pane -->
|
|
|
<div id="navbar-messages" class="tab-pane">
|
<!-- second tab pane and the .dropdown-menu inside it -->
|
<ul class="dropdown-navbar dropdown-menu dropdown-menu-right">
|
<!-- .dropdown-content -->
|
<li class="dropdown-content">
|
<ul class="dropdown-menu dropdown-navbar">
|
<li>
|
item # 1
|
</li>
|
<li>
|
item # 2
|
</li>
|
</ul>
|
</li><!-- /.dropdown-content -->
|
|
<li class="dropdown-footer">
|
...
|
</li>
|
</ul>
|
</div><!-- /.tab-pane -->
|
|
</div><!-- /.tab-content -->
|
|
</div><!-- /.tabbable -->
|
|
</div><!-- /DIV.dropdown-menu -->
|
</li>
|
</ul><!-- /.ace-nav -->
|
</pre>
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
<!-- /section:basics/navbar.tabbed -->
|
|
|
</div><!-- /.help-content -->
|
<!-- /section:basics/navbar.dropdown -->
|
|
|
|
|
|
|
<div class="hr hr-double hr32"></div>
|
<h2 class="help-title blue lighter" data-id="#basics/navbar.user">
|
User Menu
|
</h2>
|
<div class="space-4"></div>
|
|
<div class="help-content">
|
<h3 class="info-title smaller" data-id="#basics/navbar.user_menu">User menu</h3>
|
<!-- #section:basics/navbar.user_menu -->
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
<div>
|
<span class="thumbnail inline">
|
<img src="images/user-menu.png" />
|
</span>
|
</div>
|
User menu has the following markup and is inside <code>ul.ace-nav</code>
|
<br />
|
<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/default/navbar/</span>user_menu.mustache</code>
|
<br />
|
<pre data-language="html">
|
<ul class="ace ace-nav">
|
...
|
<li class="light-blue">
|
<a data-toggle="dropdown" href="#" class="dropdown-toggle">
|
<img class="nav-user-photo" src="path/to/avatar.jpg" alt="Jason's Photo" />
|
<span class="user-info">
|
<small>Welcome,</small> Jason
|
</span>
|
<i class="ace-icon fa fa-caret-down"></i>
|
</a>
|
<ul class="user-menu dropdown-menu dropdown-menu-right dropdown-yellow dropdown-caret dropdown-close">
|
<li><a href="#"><i class="ace-icon fa fa-cog"></i> Settings</a></li>
|
<li class="divider"></li>
|
<li><a href="#"><i class="ace-icon fa fa-power-off"></i> Logout</a></li>
|
</ul>
|
</li>
|
|
</ul>
|
</pre>
|
|
You can also add <code>.user-min</code> class to it, so it becomes more compact:
|
<pre data-language="html">
|
<li class="light-blue user-min">
|
...
|
</li>
|
</pre>
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
</div>
|
<!-- /section:basics/navbar.user_menu -->
|
|
|
|
|
<div class="hr hr-double hr32"></div>
|
<h2 class="help-title blue lighter" data-id="#basics/navbar.toggle">
|
Toggle buttons
|
</h2>
|
<div class="space-4"></div>
|
|
<!-- #section:basics/navbar.toggle -->
|
<div class="help-content">
|
<h3 class="info-title smaller">1. Navbar toggle button</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Toggle buttons are used when navbar or sidebar have collapsible mobile style.
|
<br />
|
You should put the code either inside <b>.navbar-header</b> which contains brand text or before it:
|
<pre data-language="html">
|
<!-- collapse style toggle buttons can be here -->
|
<div class="navbar-header pull-left">
|
<a class="navbar-brand" href="#">
|
<!-- brand text is here -->
|
</a>
|
<!-- collapse style toggle buttons can be here -->
|
</div>
|
</pre>
|
</li>
|
|
<li>
|
The following is a button which toggles <code>.navbar-buttons,.navbar-menu</code>.
|
<br />
|
Using <code>data-toggle</code> and <code>data-target</code> attributes,
|
you can choose to toggle any element, for example toggle only <code>.navbar-buttons</code> or
|
both <code>.navbar-buttons,.navbar-menu</code>
|
<pre data-language="html">
|
<button
|
class="pull-right navbar-toggle navbar-toggle-img collapsed" type="button"
|
data-toggle="collapse" data-target=".navbar-buttons,.navbar-menu">
|
<span class="sr-only">Toggle user menu</span>
|
<img src="path/to/avatar/user.jpg" alt="Jason's Photo" />
|
</button>
|
</pre>
|
</li>
|
|
<li>
|
Inside the button you can also use an icon instead of an avatar :
|
<br />
|
<pre data-language="html">
|
<button class="pull-right navbar-toggle collapsed" type="button"
|
data-toggle="collapse" data-target=".navbar-buttons">
|
<span class="sr-only">Toggle user menu</span>
|
<i class="ace-icon fa fa-user fa-2x white"></i>
|
</button>
|
</pre>
|
</li>
|
|
<li>
|
See the following for more info:
|
<br />
|
<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/navbar/</span>toggle_buttons.mustache</code>
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
|
|
|
|
<h3 class="info-title smaller" data-id="#basics/navbar.toggle.sidebar">2. Sidebar toggle button</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Please see <a href="#basics/sidebar.mobile.toggle" class="help-more">Sidebar toggle</a> for more info
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
</div><!-- /.help-content -->
|
<!-- /section:basics/navbar.toggle -->
|
|
|
|
|
|
|
|
|
|
|
|
<div class="hr hr-double hr32"></div>
|
<h2 class="help-title blue lighter" data-id="#basics/navbar.toggle">
|
Navbar Menu & Form
|
</h2>
|
<div class="space-4"></div>
|
|
<div class="help-content">
|
<h3 class="info-title smaller" data-id="#basics/navbar.nav">1. Navbar Menu</h3>
|
<!-- #section:basics/navbar.nav -->
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
You can have a menu inside navbar like <b>top menu</b> sample page.
|
</li>
|
|
<li>
|
For an overview of the HTML markup needed for that you can see:
|
<br />
|
<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/navbar/</span>topmenu.mustache</code>
|
</li>
|
|
<li>
|
Inside <code>.navbar-menu</code> container, you should have <code>ul.nav.navbar-nav</code> element:
|
</li>
|
|
<li>
|
<pre data-language="html">
|
<nav role="navigation" class="navbar-menu pull-left collapse navbar-collapse">
|
<ul class="nav navbar-nav">
|
|
<li>
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
item # 1
|
</a>
|
<ul class="dropdown-menu dropdown-light-blue dropdown-caret">
|
<!-- optional submenu items -->
|
</ul>
|
</li>
|
|
<li>
|
<a href="#">
|
item # 2
|
</a>
|
</li>
|
|
</ul>
|
|
<!-- you can also have a form here -->
|
</nav>
|
</pre>
|
</li>
|
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
<!-- /section:basics/navbar.nav -->
|
|
|
<h3 class="info-title smaller" data-id="#basics/navbar.form">2. Navbar Form</h3>
|
<!-- #section:basics/navbar.form -->
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Navbar form is similar to navbar menu.
|
<br />
|
Inside <code>.navbar-menu</code> container, the form should have <code>.navbar-form</code> class:
|
<br />
|
<pre data-language="html">
|
<nav role="navigation" class="navbar-menu pull-left collapse navbar-collapse">
|
<!-- you can also have a menu here -->
|
<form class="navbar-form navbar-left form-search" role="search">
|
<div class="form-group">
|
<input type="text" placeholder="search" />
|
</div><button type="button" class="btn btn-xs btn-info2">
|
<i class="ace-icon fa fa-search icon-only bigger-110"></i>
|
</button>
|
</form>
|
</nav>
|
</pre>
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
<!-- /section:basics/navbar.form -->
|
|
</div><!-- /.help-content -->
|
|
<!-- /section:basics/navbar -->
|
|
</section>
|
