BaseNavigation

navigation bar component tabs (internal or external links)

Props

Prop name	Description	Type	Values	Default
primaryItems	list of primary navigation items, with the following properties: id string - a unique id label string - a label for the route to be displayed shortLabel string? - a shorter version of the label to be shown if the regular label does not fit the element anymore route string? - the route of the element should navigate to url string? - the external url to navigate to on element click routeMatch RegEx? - provide a regular expression that will be used to determine the currently active element caveat: the object requires either the route or the url property! on a desktop screen, these elements will be rendered on the left-hand side of the navigation on a mobile screen, these elements will be rendered in the upper half of the dropdown list	array	-	[ { id: '1', label: 'Label', shortLabel: '', route: '/', }, ]
secondaryItems	list of secondary navigation items, with the following properties: id string - a unique id label string - a label for the route to be displayed shortLabel ?string - a shorter version of the label to be shown if the regular label does not fit the element anymore route string? - the route of the element should navigate to url string? - the external url to navigate to on element click routeMatch RegEx? - provide a regular expression that will be used to determine the currently active element caveat: the object requires either the route or the url property! on a desktop screen, these elements will be rendered on the right-hand side of the navigation on a mobile screen, these elements will be rendered in the lower half of the dropdown list	array	-	[ { id: '1', label: 'Label', shortLabel: '', route: '/', }, ]
renderAs	specify how link element should be rendered - this needs to be a valid vue link component string (e.g. 'RouterLink') a component directly and vue-router is necessary or 'a' for a native HTML link element caveat: if you are using Nuxt the string 'NuxtLink' is not enough, but you need to import the component as import { NuxtLink } from '#components'; and pass the component to the prop!	string|object	-	'a'
navigationLabel	specify a label for the navigation bar - for accessibility reasons	string	-	'App Navigation'
menuButtonLabel	provide a accessible label for the mobile menu icon	string	-	'Toggle Navigation'
activeElementId	active Element can be set two ways: 1) provide a regex in property routeMatch for each element in primaryItems and secondaryItems 2) handle the active element in the front end and set the active element id with this property - this property will have priority over routeMatch	string|number	-	null
mobileSize	define a custom size (in px) when the component should switch to mobile view (with hamburger menu icon)	number	-	640

---