Navigation - Web Component

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

Parameters

The Web component uses the <z-navigation> tag:

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description	Slot
menu	string[]	The options for the menu
routes (optional)	string[]	The links found in the navigation bar.

The available slots for the component are:

Name	Tags	Description
default	span

menu

The attribute menu is an array of objects that represent the menu items. Each object has the following properties:

• text: The text to be displayed for the list item.
• href: The URL to navigate to when the list item is clicked.
• items: An array of objects that represent the sub-menu items. Each object has the same properties as the parent object.

The menu it's separated in columns, make sure if you want to display different list options in the same column you use the same array.

routes

The attribute routes is an array of objects that represent the navigation links. Each object has the following properties:

• text: The text to be displayed for the list item.
• href: The URL to navigate to when the list item is clicked.
• icon: The icon to be displayed for the list item.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.5.3/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.3/@zurich/web-components/navigation.js"></script>

Code

<z-navigation
  routes='[{"text":"Home","href":"#", "icon":"home:line"},{"text":"Contact us","href":"#", "icon":"chat:line"},{"text":"Search","href":"#", "icon":"search:line"}]'
  menu='[
    [
      {"text":"News and media", "items":[{"text":"Overview"}, {"text":"Media releases"}, {"text":"Calendar and events"}, {"text": "Media Library"}]}, 
      {"text": "About us", "items": [{"text":"Overview"}, {"text":"Annual Report"}, {"text":"Zurich Talks"}, {"text": "Our strategy", "items":[{"text":"Overview"}, {"text":"Innovation & Technology"}]}]}
    ],
    [
      {"text": "Product and Services", "items": [{"text":"Overview"}, {"text": "Commercial Insurance", "items":[{"text":"Overview"}, {"text":"Products"}, {"text":"Services"}, {"text":"Claims"}]}]},
      {"text": "Industry Knowledge", "items": [{"text":"Overview"}, {"text": "Topics", "items":[{"text":"Future of work"}, {"text":"Global risks"}, {"text":"Digital, data and cyber"}]}]}
    ]
  ]'>
</z-navigation>