You are using Internet Explorer 11 or earlier, this browser is no longer supported by this website. We suggest to use a modern browser.

UCP Pattern Library
UCP Pattern Library
UCP Pattern LibraryUCP Pattern LibraryUCP Pattern Library
  • Deutsch
  • Pattern Library
  • flexible
    • Deutsch
  • Home
  • Patterns by type
  • Navigation
  • Tab Navigator

Tab Navigator

The “Tab navigator” module is used to navigate to internal links using tab links.

Tab navigator will be placed at the top of your application and will only have a single row that includes the title of your application.

It organize content into separate views where only one view can be visible at a time. Each tab’s label is shown in the tab header and the active tab’s label is designated with the animated ink bar.

Example page view

The module is marked in orange

zoom

This is how the module works

The module consists of the following components:

Content areaDescription
TabTab used to add tabs in tab navigator
Target PageIs used to add target page via link for tab navigator
Link TextThe Link Text is used to add text for link
LinkThe Link is used to add path to the target page
VisibleThe visible checkbox is used give permission for visibility of component
Navigation URL slug (optional)If given, slug will be appended to target page. E.g. <navigation-url/slug>

The module can be used in the following templates and page areas:

Startpage
stage
content
Content Page
stage
main content
right
bottom
Flexible Layout
full-width
default
default with sidebar right
sidebar
sidebar
default with sidebar left
The blue area indicates that the module is applicable in this content area.

This module can be used in the following themes:

  • Internet
  • Intranet
  • Suite
The blue area indicates that the module is applicable in this theme.

This is what the module looks like

Tab Navigator

Example page

arrow-down UCP Pattern Library

  • brandfactory
  • media pool - das Digital Asset Management System für thyssenkrupp
  • CMS Login

Follow us

  • Global Corporate Website
© thyssenkrupp AG 2023
  • Sitemap
  • Imprint
  • Legal Notes
  • Share tk-share
    FacebookTwitter Email LinkedIn