A rail is navigational component that allows the user to navigate between multiple main destinations of an app. While being conceptually similar to a tab-bar, a rail consists of an icon, text and an optional counter element.
Rail items should be used for:
More than 3 main destinations
where each destination has approximately similar importance for the user
where users frequently switch between the destinations
Either above content or below content of the destination.
Rail item structure
Rail items can either be:
a div
or an a
tca-rail__text can at maximum span 2 lines.
Tca-rail modifiers that influence the rail as a whole
tca-rail--vertical
Displays the rail navigation in a vertical layout.
Color coding rail items [optional]
When the destination of a rail-item is one of the main entities, color-coding can be used.
Syntax for this is tca-rail__item--{color-coding-modifier}
tca-rail__item modifiers that influence a single rail item
tca-rail__item--selected
Should be placed on the rail item representing the current active view.
Attention Only one rail item can be selected simultaneously.
tca-rail__item--disabled
Should be used if a navigation destination is not available under certain circumstances.
Recommendation If the navigation destination is never available for a certain user or if there are privacy concerns, the rail item should not be shown at all.
A navigation component that is shown on the left of a page or dialog. This scales up nicely even when many navigation items are need that also need to be categorized (under headlines).
Use tca-vertical-nav--icon-only to when you want to use the icons only variant.
Use tca-vertical-nav--collapsed to switch to a collapsed view showing only icons
Use this only when you have icons AND text, the other two variants do not support the collapsed view.
Provide a tca-vertical-nav__resize-button button to allow users toggling between expanded and collapsed view.
Use tca-vertical-nav--counters-visible-while-collapsed to show the counters alse in the collapsed view (default is to not show them).
Use tca-vertical-nav--align-with-summary when the menu and the summary-card are placed next to each other and should overlap.
Modifiers for nav-items
Use tca-vertical-nav__item--selected to highlight the currently selected menu item.
Use tca-vertical-nav__item--disabled to disable a single menu item
Use tca-vertical-nav__item--{entity} to color the icon in the color for this entity (example: tca-vertical-nav__item--person will color the icon background blue.
A navigation component to suggest possible next steps to the user.
Global Modifiers
Use tca-next-steps--{entity-name} when you want the next-steps area to be color-coded. A common usecase would be, if you want the headline background to match the color of the current entity/dialog.
Use tca-next-steps--align-center to center the next-steps component within the current container.
Use tca-next-steps--restrict-width to set a maximum width on the whole next-steps container and all its suggestion items.
Use tca-next-steps--no-border if you want to remove the border styling. Especially if you want to use the variant without a headline.
Modifiers for the individual suggestions
You can use any icon- class on the tca-next-steps__suggestion-icon element to display a custom icon. If you dont specify an icon, a default icon (arrow-right) will be shown
Use tca-next-steps__suggestion--{entity-name} when you want the background of the icon in the suggestion to be color-coded.
Allow a single suggestions to be opened in a new browser-tab
Simply add an additional button or link with the class tca-next-steps__suggestion-open-in-new-tab within your suggestion element.
Menus are displayed as a popup surface and show a list of actions.
Opening/closing as well as positioning are controlled by the application –
the styleguide only provides the styling.
Variants
There are four basic variants (see the examples below):
Main-Menu
Full menu with a header (tca-menu__header), icons and entity color coding.
[Recommendation]: Use for context-related action menus, e.g. "Create new".
Sub-Menu
Same as the main-menu, but with a back button in the header (tca-menu__header-back-button).
[Recommendation]: Use for nested menus that are opened from an entry with a tca-menu__submenu-indicator.
Simple-Menu
Text-only menu without icons and without a header.
[Recommendation]: Use for simple navigation or selection lists.
Compact-Menu (tca-menu--compact)
Denser layout with reduced padding and flat, monochrome icons (no colored icon background).
[Recommendation]: Use for context menus with many entries where little space is available.
Structure of an entry
An entry (tca-menu__item) optionally consists of:
tca-menu__icon – an icon (uses the iconfont classes, e.g. icon-edit).
tca-menu__text – the label text (required).
tca-menu__submenu-indicator – arrow indicating that a sub-menu will open.
tca-menu__new-indicator – "NEW" badge to highlight new entries.
[Note]: Entries can be marked up as <a>, <button> or <div>. For accessibility, set role="menuitem" and tabindex="0".
Available modifiers
Entries can be adapted to the use case with CSS modifier classes. These are all [optional].
tca-menu__item--disabled
Displays the entry greyed out and non-clickable.
tca-menu__item--danger
Marks destructive actions (e.g. "Delete") with a red icon color.
A tab bar component is used for navigation between different sections or views within an application. It typically appears at the bottom of the screen and allows users to switch between different tabs easily.
Modifiers
Use tab-bar__link--active to highlight the currently selected tab-bar item.
Use tab-bar__link--disabled to disable a single tab-bar item
Use tab-bar--no-border-bottom modifier to hide the border below the tab-bar
Use tab-bar__counter--danger modifier to signal the user, that the count of items is important (will get colored red).
