-
.oj-disabled
-
Any list item can be disabled by adding the oj-disabled class to that element
Example
<oj-navigation-list>
<ul>
<li id="foo" class="oj-disabled">
<a href="#">
<span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24">
</span>
Foo
</a>
</li>
</ul>
</oj-navigation-list>
-
.oj-focus-highlight
-
Under normal circumstances this class is applied automatically.
It is documented here for the rare cases that an app developer needs per-instance control.
The oj-focus-highlight class applies focus styling that may not be desirable when the focus results from pointer interaction (touch or mouse), but which is needed for accessibility when the focus occurs by a non-pointer mechanism, for example keyboard or initial page load.
The application-level behavior for this component is controlled in the theme by the $focusHighlightPolicy SASS variable; however, note that this same variable controls the focus highlight policy of many components and patterns. The values for the variable are:
nonPointer: oj-focus-highlight is applied only when focus is not the result of pointer interaction. Most themes default to this value.
all: oj-focus-highlight is applied regardless of the focus mechanism.
none: oj-focus-highlight is never applied. This behavior is not accessible, and is intended for use when the application wishes to use its own event listener to precisely control when the class is applied (see below). The application must ensure the accessibility of the result.
To change the behavior on a per-instance basis, the application can set the SASS variable as desired and then use event listeners to toggle this class as needed.
Example
<oj-navigation-list class="oj-focus-highlight">
<!-- Content -->
</oj-navigation-list>
-
.oj-navigationlist-category-divider
-
Use this class to add a horizontal divider line between two categories of items.
Example
<oj-navigation-list>
<ul>
<li ...></li>
<li class="oj-navigationlist-category-divider"></li>
<li id="foo">
<a href="#">
<span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24">
</span>
Foo
</a>
</li>
</ul>
</oj-navigation-list>
-
.oj-navigationlist-item-dividers
-
Note: This styleclass is not supported in the following themes: Redwood
Use this class to render a divider between list items.
Example
<oj-navigation-list class="oj-navigationlist-item-dividers" >
<ul>
<li id="foo">
<a href="#">
<span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24">
</span>
Foo
</a>
</li>
</ul>
</oj-navigation-list>
-
.oj-navigationlist-item-end
-
Use this class to add an badge/metadata/icon to a list item.
Example
<oj-navigation-list>
<ul>
<li id="foo">
<a href="#">
<span class="oj-navigationlist-item-end">
<span class="oj-badge oj-badge-subtle">3
</span>
</span>
Foo
</a>
</li>
</ul>
</oj-navigation-list>
-
.oj-navigationlist-item-icon
-
Use this class to add an icon to a list item.
Example
<oj-navigation-list class="oj-navigationlist-stack-icon-label" >
<ul>
<li id="foo">
<a href="#">
<span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24">
</span>
Foo
</a>
</li>
</ul>
</oj-navigation-list>
-
.oj-navigationlist-item-label
-
Use this class to specify the element with the label. This will eliminate the need for NavigationList to automatically
wrap any child element that is not an icon or a badge with this class. Note the content must have the correct
order (icon element first, then the label element, then the badge element) as NavigationList in this case will not attempt
to reorder the content.
Example
<oj-navigation-list class="oj-navigationlist-stack-icon-label" >
<ul>
<li id="foo">
<a href="#">
<span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24">
</span>
<span class="oj-navigationlist-item-label">
Foo
</span>
</a>
</li>
</ul>
</oj-navigation-list>
-
.oj-navigationlist-item-text-wrap
-
Use this class to wrap item label text.
Example
<oj-navigation-list class="oj-navigationlist-item-text-wrap" >
<ul>
<li id="foo">
<a href="#">
<span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24">
</span>
Foo
</a>
</li>
</ul>
</oj-navigation-list>
-
.oj-navigationlist-item-title
-
When arbitrary content is placed inside an item's content area, its title text can be marked using this style class. This helps the component in identifying the Item's label.
Example
<li id="foo">
<div>
<span class="oj-navigationlist-item-title">Play</span>
<button>Button</button>
</div>
</li>
-
.oj-navigationlist-nofollow-link
-
Use this class to prevent automatic navigation to the url specified on an <a> tag's href attribute.
In this case, navigation can be handled programmatically by using selectionChanged event.
This is useful to execute some custom logic before browser triggers navigation.
Example
<oj-navigation-list class="oj-navigationlist-nofollow-link" >
<ul>
<li id="foo">
<a href="#">
<span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24">
</span>
Foo
</a>
</li>
</ul>
</oj-navigation-list>
-
.oj-navigationlist-stack-icon-label
-
Use this class to display a Navigation List with icons and labels stacked.
Example
<oj-navigation-list class="oj-navigationlist-stack-icon-label" >
<ul>
<li id="foo">
<a href="#">
<span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24">
</span>
Foo
</a>
</li>
</ul>
</oj-navigation-list>
-
Category: Condense
-
Use this class to condense horizontal navigation list items depending on screen size.
Class template:
-
.oj-[size]-condense
Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.
-
Values for [size]
| Value (required) |
Name |
Description |
sm |
Small |
Small screen size range
|
md |
Medium |
Medium screen size range
|
lg |
Large |
Large screen size range
|
xl |
X-Large |
Extra large screen size and up
|
Example
<oj-navigation-list class="oj-sm-condense" >
<ul>
<li id="foo">
<a href="#">
<span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24">
</span>
Foo
</a>
</li>
</ul>
</oj-navigation-list>
-
CSS Variables
| Name |
Type |
Description |
--oj-navigation-list-font-size |
<length>
|
Navigation list font size |
--oj-navigation-list-font-weight |
<font_weight>
|
Navigation list font weight |
--oj-navigation-list-icon-margin |
<length>
|
Navigation list icon margin |
--oj-navigation-list-icon-to-text-padding |
<length>
|
Padding between icon and text |
--oj-navigation-list-icon-size |
<length>
|
Navigation list icon size |
--oj-navigation-list-item-min-height |
<length>
|
Navigation list item minimum height |
--oj-navigation-list-item-margin |
<length>
|
Navigation list item margin |
--oj-navigation-list-item-padding |
<length>
|
Navigation list item padding |
-
Default
| Name |
Type |
Description |
--oj-navigation-list-item-label-color |
<color>
|
Default navigation list item label color |
-
Hovered
| Name |
Type |
Description |
--oj-navigation-list-item-label-color-hover |
<color>
|
Navigation list item label color when hovered |
--oj-navigation-list-item-bg-color-hover |
<color>
|
Navigation list item background color when hovered |
-
Selected
| Name |
Type |
Description |
--oj-navigation-list-item-label-color-selected |
<color>
|
Navigation list item label color when selected |
--oj-navigation-list-item-bg-color-selected |
<color>
|
Navigation list item background color when selected |
--oj-navigation-list-item-border-color-selected |
<color>
|
Navigation list item border color when selected |
-
Sliding navigation list
| Name |
Type |
Description |
--oj-navigation-list-sliding-heading-font-size |
<length>
|
Sliding navigation list heading font size |
--oj-navigation-list-sliding-heading-font-weight |
<font_weight>
|
Sliding navigation list heading font weight |
--oj-navigation-list-sliding-heading-line-height |
<number>
|
Sliding navigation list heading line height |