Rail Item
The Rail Item component is used to select the navigation path represented by the icon.
Code
<a href="/my-link" type="patch">
<div class="backoffice-navigation-rail">
<div class="backoffice-navigation-icon"><.icon name="file" /></div>
<span>Menu Item</span>
</div>
</a>
-- (active) --
<a href="/my-link" type="patch">
<div class="backoffice-navigation-rail backoffice-navigation-rail-active">
<div class="backoffice-navigation-icon"><.icon name="file" /></div>
<span>Menu Item</span>
</div>
</a>
| Class name | type | |
|---|---|---|
| backoffice-navigation-rail | component | Container element |
| backoffice-navigation-icon | component | Navigation icon |
@media (hover: hover) { .backoffice-navigation-rail:hover { ... } } | modifier | Sets the display of the hover status |
@media (hover: hover) { .backoffice-navigation-rail:hover .backoffice-navigation-icon { ... } } | modifier | Sets the display of the hover status for the icon area |
| backoffice-navigation-rail-active .backoffice-navigation-icon svg | modifier | Sets the display in the hover state for an svg icon |
| backoffice-navigation-rail-active .backoffice-navigation-icon | modifier | Sets the display of the hover status |