@govbr-ds/core
Version:
Padrão Digital de Governo
139 lines (138 loc) • 13.7 kB
HTML
<div class="row mb-5">
<div class="col-sm-4 col-lg-3 mb-5">
<p>Densidade alta</p>
<div class="br-menu push active small">
<div class="menu-container position-static">
<div class="menu-panel h-auto position-static shadow-lg-right">
<nav class="menu-body" role="tree">
<div class="menu-folder"><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-bell" aria-hidden="true"></i></span><span class="content">Camada 1</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-heart" aria-hidden="true"></i></span><span class="content">Camada 2</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-address-book" aria-hidden="true"></i></span><span class="content">Camada 2</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-book" aria-hidden="true"></i></span><span class="content">Camada 3</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-tree" aria-hidden="true"></i></span><span class="content">Camada 3</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="icon"><i class="fas fa-moon" aria-hidden="true"></i></span><span class="content">Camada 3</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="icon"><i class="fas fa-archive" aria-hidden="true"></i></span><span class="content">Camada 2</span></a></li>
</ul>
</div>
<div class="menu-folder"><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-bell" aria-hidden="true"></i></span><span class="content">Camada 1</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-heart" aria-hidden="true"></i></span><span class="content">Camada 2</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-address-book" aria-hidden="true"></i></span><span class="content">Camada 2</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-book" aria-hidden="true"></i></span><span class="content">Camada 3</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-tree" aria-hidden="true"></i></span><span class="content">Camada 3</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="icon"><i class="fas fa-moon" aria-hidden="true"></i></span><span class="content">Camada 3</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="icon"><i class="fas fa-archive" aria-hidden="true"></i></span><span class="content">Camada 2</span></a></li>
</ul>
</div>
<div class="menu-folder"><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-bell" aria-hidden="true"></i></span><span class="content">Camada 1</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-heart" aria-hidden="true"></i></span><span class="content">Camada 2</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-address-book" aria-hidden="true"></i></span><span class="content">Camada 2</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-book" aria-hidden="true"></i></span><span class="content">Camada 3</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-tree" aria-hidden="true"></i></span><span class="content">Camada 3</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="icon"><i class="fas fa-moon" aria-hidden="true"></i></span><span class="content">Camada 3</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="icon"><i class="fas fa-archive" aria-hidden="true"></i></span><span class="content">Camada 2</span></a></li>
</ul>
</div><a class="menu-item divider" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-bell" aria-hidden="true"></i></span><span class="content">Item de Camada 1</span></a><a class="menu-item divider" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-bell" aria-hidden="true"></i></span><span class="content">Item de Camada 1</span></a>
</nav>
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-3 mb-5">
<p>Densidade baixa</p>
<div class="br-menu push active large">
<div class="menu-container position-static">
<div class="menu-panel h-auto position-static shadow-lg-right">
<nav class="menu-body" role="tree">
<div class="menu-folder"><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-bell" aria-hidden="true"></i></span><span class="content">Camada 1</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-heart" aria-hidden="true"></i></span><span class="content">Camada 2</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-address-book" aria-hidden="true"></i></span><span class="content">Camada 2</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-book" aria-hidden="true"></i></span><span class="content">Camada 3</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-tree" aria-hidden="true"></i></span><span class="content">Camada 3</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="icon"><i class="fas fa-moon" aria-hidden="true"></i></span><span class="content">Camada 3</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="icon"><i class="fas fa-archive" aria-hidden="true"></i></span><span class="content">Camada 2</span></a></li>
</ul>
</div>
<div class="menu-folder"><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-bell" aria-hidden="true"></i></span><span class="content">Camada 1</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-heart" aria-hidden="true"></i></span><span class="content">Camada 2</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-address-book" aria-hidden="true"></i></span><span class="content">Camada 2</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-book" aria-hidden="true"></i></span><span class="content">Camada 3</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-tree" aria-hidden="true"></i></span><span class="content">Camada 3</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="icon"><i class="fas fa-moon" aria-hidden="true"></i></span><span class="content">Camada 3</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="icon"><i class="fas fa-archive" aria-hidden="true"></i></span><span class="content">Camada 2</span></a></li>
</ul>
</div>
<div class="menu-folder"><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-bell" aria-hidden="true"></i></span><span class="content">Camada 1</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-heart" aria-hidden="true"></i></span><span class="content">Camada 2</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-address-book" aria-hidden="true"></i></span><span class="content">Camada 2</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-book" aria-hidden="true"></i></span><span class="content">Camada 3</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-tree" aria-hidden="true"></i></span><span class="content">Camada 3</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="icon"><i class="fas fa-moon" aria-hidden="true"></i></span><span class="content">Camada 3</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="icon"><i class="fas fa-archive" aria-hidden="true"></i></span><span class="content">Camada 2</span></a></li>
</ul>
</div><a class="menu-item divider" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-bell" aria-hidden="true"></i></span><span class="content">Item de Camada 1</span></a><a class="menu-item divider" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-bell" aria-hidden="true"></i></span><span class="content">Item de Camada 1</span></a>
</nav>
</div>
</div>
</div>
</div>
</div>