The Dc-Navigation Component

Description

Dealsnavigation

The navigation gives the customer the opportunity to jump between the different categories

Technical documentation

Here you can read the technical documentation

Screenshots

The desktop view of dc-navigation.

The mobile view of dc-navigation.

Meta

Maintainer	berlin-team-aventoms@tui.info
Locales	de-DE

Usage

Add the following script tag (or something similar) to your web page to have the component load. Note: This is required only once per webpage, even when you embed multiple instances of the component.

<script src="https://api.tui.com/ml/dc-navigation/ui/" async defer></script>

Add the following HTML code anywhere in your webpage at the position where you want the component to show. You can create multiple instances of the component. Remember to replace VALUE with actual valid values for the given attribute.

<div class="tui-component tui-component-tui-component-dc-navigation"
	data-class="VALUE"
	data-brand="VALUE"
	data-tenant="VALUE"
	data-categoryId="VALUE">
</div>

Examples

• This is an example for deals navigation component integration

  <div class="tui-component tui-component-tui-component-dc-navigation"
  	data-data-tenant="TUICOM"
  	data-data-brand="tui"
  	data-data-categoryId="4e94a950-7644-11e9-b125-6b8c257f090d">
  </div>
  

ATTENTION: This is a legacy component. The tag name must be set as class name (as in the example above), and attributes must be prefixed with data-.

Read more about using components ›

Attributes

This component can be configured with the following attributes:

Name	Description	Allowed Values	Default	Required
class	The Cottonball need the document tag classes.	tui-component		yes
scope	With the scope attribute you can use the component more than once on the same page if you want that.	yourScopeName		no
brand	changes the look of the deals navigation	tui		yes
tenant	The tenant determines which categories are displayed	tuicom, tuiat, tuich, irisplus		yes
categoryId	uuid of the category, defines which navigationtab will be highlighted.	uuid from adminpanel		yes
startingMobile	Determines when the navigation changes to the mobile view.		400	no
navContainerWidth	Determines the width (of the content) of the navigation component.		1000	no

Events