mdb-ui-kit/docs/_includes/components/navs.html
2015-11-19 15:58:21 -06:00

190 lines
7.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="bs-docs-section">
<h1 id="nav" class="page-header">Navs</h1>
<p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
<div class="bs-callout bs-callout-info" id="callout-navs-tabs-plugin">
<h4>Using navs for tab panels requires JavaScript tabs plugin</h4>
<p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>. The markup will also require additional <code>role</code> and ARIA attributes see the plugin's <a href="../javascript/#tabs-usage">example markup</a> for further details.</p>
</div>
<div class="bs-callout bs-callout-warning" id="callout-navs-accessibility">
<h4>Make navs used as navigation accessible</h4>
<p>If you are using navs to provide a navigation bar, be sure to add a <code>role="navigation"</code> to the most logical parent container of the <code>&lt;ul&gt;</code>, or wrap a <code>&lt;nav&gt;</code> element around the whole navigation. Do not add the role to the <code>&lt;ul&gt;</code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p>
</div>
<h2 id="nav-tabs">Tabs</h2>
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
<div class="bs-example" data-example-id="simple-nav-tabs">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
{% endhighlight %}
<h2 id="nav-pills">Pills</h2>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<div class="bs-example" data-example-id="simple-nav-pills">
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
{% endhighlight %}
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
<div class="bs-example" data-example-id="simple-nav-stacked">
<ul class="nav nav-pills nav-stacked nav-pills-stacked-example">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-pills nav-stacked">
...
</ul>
{% endhighlight %}
<h2 id="nav-justified">Justified</h2>
<p>Easily make tabs or pills equal widths of their parent at screens wider than 768px with <code>.nav-justified</code>. On smaller screens, the nav links are stacked.</p>
<p><strong class="text-danger">Justified navbar nav links are currently not supported.</strong></p>
<div class="bs-callout bs-callout-warning" id="callout-navs-justified-safari">
<h4>Safari and responsive justified navs</h4>
<p>As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
</div>
<div class="bs-example" data-example-id="simple-nav-justified">
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<br>
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
{% endhighlight %}
<h2 id="nav-disabled-links">Disabled links</h2>
<p>For any nav component (tabs or pills), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p>
<div class="bs-callout bs-callout-warning" id="callout-navs-anchor-disabled">
<h4>Link functionality not impacted</h4>
<p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p>
</div>
<div class="bs-example" data-example-id="disabled-nav-link">
<ul class="nav nav-pills">
<li role="presentation"><a href="#">Clickable link</a></li>
<li role="presentation"><a href="#">Clickable link</a></li>
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
{% endhighlight %}
<h2 id="nav-dropdowns">Using dropdowns</h2>
<p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>
<h3>Tabs with dropdowns</h3>
<div class="bs-example" data-example-id="nav-tabs-with-dropdown">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Help</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
{% endhighlight %}
<h3>Pills with dropdowns</h3>
<div class="bs-example" data-example-id="nav-pills-with-dropdown">
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Help</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /example -->
{% highlight html %}
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
{% endhighlight %}
</div>