4.13.1 components.list-style.menu-item List style menu item
Toggle example guides Toggle HTML markup
Styles used for menu items in lists, especially in asides.
Used primarily for sidebar navigation, this makes an anchor tag within the
styled list item a clickable block and matches
%list-style--menu-item--collapsed and %list-style--menu-item--expanded
to proper glyphicons.
NOTE: A <div> tag can be added as a wrapper for the anchor tag by some
modules, namely facetapi_collapsible. We accommodate for that possibility
with the addtional > div code in this component to ensure bullet glyphs
are properly rendered.
Example
Markup: components/list-styles/list-styles--menu-item.twig
<ul style="padding:0; margin:0;">
<li class="list-style--menu-item"><a href="#">Menu Item</a></li>
<li class="list-style--menu-item list-style--menu-item--collapsed"><a href="#">Menu Item Collapsed</a>
<ul style="padding:0; margin:0;">
<li class="list-style--menu-item"><a href="#">Sub-menu Item 1</a></li>
<li class="list-style--menu-item"><a href="#">Sub-menu Item 2</a></li>
<li class="list-style--menu-item"><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
<li class="list-style--menu-item list-style--menu-item--expanded"><a href="#">Menu Item Expanded</a>
<ul style="padding:0; margin:0;">
<li class="list-style--menu-item"><a href="#">Sub-menu Item 1</a></li>
<li class="list-style--menu-item"><a href="#">Sub-menu Item 2</a></li>
<li class="list-style--menu-item"><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
</ul>
Source:
sass/components/list-styles/_list-styles.scss, line 5