@collab-ui/core
Version:
Cisco Collab UI CSS Framework
202 lines • 6.93 kB
HTML
<div
class="cui-sidebar cui-sidebar--global cui-sidebar--indented cui-sidebar--nested cui-sidebar--expanded"
>
<div class="cui-sidebar__body">
<div class="cui-sidebar-nav">
<div
class="cui-list cui-list--vertical cui-sidebar-nav__group cui-sidebar-nav__group--primary"
role="list"
>
<a
class="cui-list-item"
id="cui-sidebar__nav-item-1-9"
role="listitem"
data-md-event-key="cui-sidebar__nav-item-1-9"
href="javscript:void(0)"
>
<div class="cui-list-item__left">
<i
class="cui-icon icon icon-record_20"
style="font-size: 20px; color: inherit;"
></i>
</div>
<div class="cui-list-item__center">Level 1</div>
</a>
<a
class="cui-list-item"
id="cui-sidebar__nav-item-1-11"
role="listitem"
data-md-event-key="cui-sidebar__nav-item-1-11"
href="javscript:void(0)"
>
<div class="cui-list-item__left">
<i
class="cui-icon icon icon-record_20"
style="font-size: 20px; color: inherit;"
></i>
</div>
<div class="cui-list-item__center">Level 1 Closed</div>
<div class="cui-list-item__right">
<i
class="cui-icon icon icon-arrow-down_12"
style="font-size: 12px; color: inherit;"
></i>
</div>
</a>
<div
class="cui-sidebar-nav__group cui-sidebar-nav__group--secondary cui-sidebar-nav__group--collapsed"
></div>
<a
class="cui-list-item"
id="cui-sidebar__nav-item-1-1"
role="listitem"
data-md-event-key="cui-sidebar__nav-item-1-1"
href="javscript:void(0)"
>
<div class="cui-list-item__left">
<i
class="cui-icon icon icon-record_20"
style="font-size: 20px; color: inherit;"
></i>
</div>
<div class="cui-list-item__center">Level 1 Open</div>
<div class="cui-list-item__right">
<i
class="cui-icon icon icon-arrow-up_12"
style="font-size: 12px; color: inherit;"
></i>
</div>
</a>
<div
class="cui-sidebar-nav__group cui-sidebar-nav__group--secondary cui-sidebar-nav__group--expanded"
>
<a
class="cui-list-item"
id="cui-sidebar__nav-item-1-3-1"
role="listitem"
data-md-event-key="cui-sidebar__nav-item-1-3-1"
href="javascript:void(0)"
>
<div class="cui-list-item__center">Level 2</div>
</a>
</div>
<a
class="cui-list-item active"
id="cui-sidebar__nav-item-1-5"
role="listitem"
data-md-event-key="cui-sidebar__nav-item-1-5"
href="javascript:void(0)"
>
<div class="cui-list-item__left">
<i
class="cui-icon icon icon-record_20"
style="font-size: 20px; color: inherit;"
></i>
</div>
<div class="cui-list-item__center">Level 1 Open</div>
<div class="cui-list-item__right">
<i
class="cui-icon icon icon-arrow-up_12"
style="font-size: 12px; color: inherit;"
></i>
</div>
</a>
<div
class="cui-sidebar-nav__group cui-sidebar-nav__group--secondary cui-sidebar-nav__group--expanded"
>
<div
aria-current="true"
class="cui-list-item"
id="cui-sidebar__nav-item-1-7-1"
role="listitem"
data-md-event-key="cui-sidebar__nav-item-1-7-1"
>
<div class="cui-list-item__center">Level 2 Open</div>
<div class="cui-list-item__right">
<i
class="cui-icon icon icon-arrow-up_12"
style="font-size: 12px; color: inherit;"
></i>
</div>
</div>
<div
class="cui-sidebar-nav__group cui-sidebar-nav__group--tertiary cui-sidebar-nav__group--expanded"
>
<div
class="cui-list-item"
id="cui-sidebar__nav-item-1-7-3-1"
role="listitem"
data-md-event-key="cui-sidebar__nav-item-1-7-3-1"
>
<div class="cui-list-item__center">Level 3</div>
</div>
<div
class="cui-list-item active"
id="cui-sidebar__nav-item-1-7-3-3"
role="listitem"
data-md-event-key="cui-sidebar__nav-item-1-7-3-3"
>
<div class="cui-list-item__center">Level 3</div>
</div>
<div
class="cui-list-item"
id="cui-sidebar__nav-item-1-7-3-5"
role="listitem"
data-md-event-key="cui-sidebar__nav-item-1-7-3-5"
>
<div class="cui-list-item__center">Level 3</div>
</div>
</div>
<div
class="cui-list-item"
id="cui-sidebar__nav-item-1-7-4"
role="listitem"
data-md-event-key="cui-sidebar__nav-item-1-7-4"
>
<div class="cui-list-item__center">Level 2 Closed</div>
<div class="cui-list-item__right">
<i
class="cui-icon icon icon-arrow-down_12"
style="font-size: 12px; color: inherit;"
></i>
</div>
</div>
<div
class="cui-sidebar-nav__group cui-sidebar-nav__group--tertiary cui-sidebar-nav__group--collapsed"
></div>
<div
class="cui-list-item active"
id="cui-sidebar__nav-item-1-7-6"
role="listitem"
data-md-event-key="cui-sidebar__nav-item-1-7-6"
>
<div class="cui-list-item__center">Level 2</div>
</div>
</div>
</div>
</div>
<div class="cui-sidebar-nav">
<div class="cui-sidebar-nav__header">section header</div>
<div
class="cui-list cui-list--vertical cui-sidebar-nav__group cui-sidebar-nav__group--primary"
role="list"
>
<a
class="cui-list-item"
id="cui-sidebar__nav-item-2-1"
role="listitem"
data-md-event-key="cui-sidebar__nav-item-2-1"
href="javscript:void(0)"
>
<div class="cui-list-item__left">
<i
class="cui-icon icon icon-record_20"
style="font-size: 20px; color: inherit;"
></i>
</div>
<div class="cui-list-item__center">Level 1</div>
</a>
</div>
</div>
</div>
</div>