Simple breadcrumb with no configuration applied. Shows the current page in relation to the page hierarchy. As the Navigation Start Level defaults to 2, the first page listed is the Component Library root page (0 = /, and 1 = /content/). For pages with a redirection target, the title and the link of the redirection target will be used. Because of that, the second item in the list is also shown as Component Library, instead of Templating, as that child page redirects to its parent. The next child page with the title Hidden is not listed, because it is marked to be hidden from the navigation.

In this example, we increase the Navigation Start Level to 3 to display a breadcrumb for a section one level lower in order to avoid the repeating Component Library page.

In the first example, notice how the second entry for the Templating page was listed as Component Library like the first entry, because that child page redirects to its parent page. If this shadowing behavior is undesired, it can be turned off like shown here.

Simple language navigation that allows to navigate to the same page in another language. If the same path doesn't exist in the content structure of the other language, then the navigation shows a path to the deepest parent page that it finds in the other language. To keep the pages of different locales linked (for the navigation as well as for the translation process), the convention is that they must keep the same path. Therefore, authors must not move or rename the pages, and instead use the Alias property if it is desired to localize the page name. The text displayed by the language navigation for each listed link is the Navigation Title of the language root page, or the main page Title when no navigation title is set on that page.

The Language Structure Depth property allows to construct the navigation for content that is not only translated in different languages, but also tailored to regional markets. This allows to custruct for example a country / language structure. There can also be more than 2 levels of nesting, but the page structure must follow the same hieararchy.

The default behavior of the navigation component is to generate a nested navigation structure from the configured page tree. It will collect all child pages by iterating deeply through the entire page hiearchy. When not configured otherwise, the root page will be excluded, and all pages that are marked to be hidden from the navigation will not be listed. The text shown for each linked page is the Navigation Title when provided by the page, or the main page Title otherwise. Pages that have a redirection target to other pages, like the Breadcrumb and the Language Navigation pages will be linked directly to the redirection target, from which also the title is taken.

In this example we display the root page that is hidden by default by reducing the Exclude Root Levels option to zero.

Multiple root levels can be skipped. In this example, setting the Exclude Root Levels to 2 shows then only shows the leaf pages.

By default, the navigation is lists all child pages. In this example, we disabling the option to Collect all child pages, and then reduce Navigation Structure Depth to the first level only. 

In the previous examples, notice how the Breadcrumb and the Language Navigation pages that redirect to a much deeper child page were linked directly to the target page. This allows authors to create menu structures that can be different from the actual page hierarchy.

The example below shows how that automatic linking to the target page can be disabled (listing only the templating section).

By default, the navigation component has a navigation role applied. Authors can change this to a different value if desired, like below where a Secondary Navigation role is set (listing only the templating section).

Default table of contents without any configuration.

The default list type is bulleted, default start level is h1 and default stop level is h6.

Configuring the list type to numbered.

Configuring the start level to h2.

Configuring the stop level to h2.

Configuring the id to sample-id.

Accordion with three items with each item being a layout container.

Accordion with three items with each item being a layout container and containing sample content.

Accordion with three items with the item expanded by default being the first item.

Accordion with three items and all items expanded by default.

Accordion with single expansion enabled, which forces a single item to be expanded at a time. Expanding one item will collapse all others.

Nested accordions, with each item containing an accordion component in its layout container.

Linking to an accordion item expands the item and scrolls to it.

Simple Button with only a text configured.

Button linked to a page. Buttons with links provided are rendered as anchors.

An icon identifier can be provided for rendering an icon in the button.

Carousel with three image components as child items.

Carousel with three teaser components as child items.

Automatic transitioning of slides can be enabled. The delay before transitioning to the next slide is also configurable. Pause and play buttons are displayed which allow stopping / continuing slide rotation.

The default behavior is to pause when hovering the carousel, and automatic transitioning is enabled. This can be disabled, which may be useful for certain use cases, such as a full screen carousel.

Carousel with three images with the default active item being the second image.

Linking to a carousel item displays the item and scrolls to it.

Simple Download with only an Action Text and Download Asset configured. The Title and Description are by default taken from the provided asset.

By default, the Title and Description are taken from the provided asset. In this example, we provide a custom title and description for the download.

It is possible to upload an asset directly from a local file system rather than selecting an asset from DAM.

By default the asset is downloaded directly, but it is also possible to display it inline in the browser.

URLs to embeddable objects can be pasted in the edit dialog. Embed will check that the URL matches a supported processor and provide feedback to the author. Additional URL processors can be registered by a developer.

URLs to embeddable objects that use oEmbed to retrieve the embedding information. This example uses the bundled Twitter configuration. Other configurations can be easily added by a developer.

Trusted pre-configured embeddable snippets that can be selected by an author. These snippets are parameterized and can include unsafe tags such as script. Developers are able to create custom embeddable snippets for selection in the edit dialog.

Allows an author to input free-form html and is restricted to safe tags only. For example, the script tag is not supported.

Progress bar can be used to display progress.

Default progress bar with no configuration.    

Progress bar with custom defined completion.

Search component that displays search results based on the search query

Quick search component with basic configuration that defines Search Root.  

Tabs with three tab panels with each tab panel being a layout container.

Tabs with three tab panels with each tab panel being a layout container and containing sample content.

Tabs with three tab panels with the default active item being the third tab.

Nested tabs structure with each tab panel containing a tabs component in its layout container.

Linking to a tabs item displays the item and scrolls to it.

The viewing area renders in the full browser. Best suited for storage and productivity applications.

The sized container mode displays PDFs in a boxed container with landscape orientation. Best suited for presentations.