Standard
Use .text-primary
to apply the primary color to active items.
Background highlight
Use .bg-primary
and .text-primary-inverse
on active items for a pill-style navigation.
Use border and margin utilities to display the border on the opposite side.
The above example uses a custom shade of the primary color, which can be created using the Sass source files available with every theme. For example:
$color-primary-100: #e8f3ff;
// Add the color to the $colors Sass map to create utility variants
$colors: (
"primary-100": $color-primary-100
);
Cards
Multi-level
Vertical navigation elements can have multiple levels representing categories, sections and/or articles.
The following two examples demonstrate usage of the Section lists plugin on the Section page.
An example of this pattern can be seen in our Rosetta theme.
Using templateData
option, you can pass additional data to the template.
Common use cases include passing the active category, section and/or article ID, however it could also include display options like the maximum number of articles to display before presenting a View all articles link (maxArticles: 5
in the example below).
The following example demonstrate usage of the Article lists plugin on the Article page.
An example of this pattern can be seen in our Ada theme.
All examples above can be used anywhere in the Help Center as they are built using our micro-templating system, however the variables passed to the templating function (for example, activeCategory
, activeSection
and activeArticle
) should be set accordingly.