mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-11 20:28:14 +03:00
190 lines
7.9 KiB
HTML
190 lines
7.9 KiB
HTML
<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><ul></code>, or wrap a <code><nav></code> element around the whole navigation. Do not add the role to the <code><ul></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><a></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>
|