Navigation

Default navigation

Navigation with sidebar

Navigation logged in

Navigation with chosen department (for mobile)

Primary navigation

The primary site navigation (top of page) is composed of a family of v-navbar-* components plus a few other components. They must be placed in the #navigation slot of the v-layout component. See example markup in the Code tab above.

API: v-navbar-logo

Name	Type	Description	Default
title	String	Title attribute for HTML anchors.	-
department	Object	The currently selected department object	{}
department-options	Array	Array of all available department objects	[]
slot: modal-content	Slot	Insert content to be shown in the department change modal dialog.	-

API: v-language-selector

Name	Type	Description	Default
locales	Object	An object that associate locales with urls	{}

API: v-navbar-notifications

Name	Type	Description	Default
title	String		-
unread-url	String	API endpoint from which to fetch unread state, i.e. does the current user have any unread notifications? Must return true or false.	-
notifications-url	String	API endpoint from which to fetch a list of v-navbar-notifications-item components. See below.	-

API: v-navbar-notifications-item

Name	Type	Description	Default
date	String	Notification timestamp. Use any date string accepted by v-date.	-
title	String	Notification title.	-
text	String	Notification body text.	-
button-title	String	Optional button title.	-
button-href	String	Optional button href.	-

API: v-navbar-navigation-item

Name	Type	Description	Default
href	String	Specifies the URL of the page the link goes to.	-
target	String	Specifies where to open the linked document.	-
title	String	HTML title Attribute.	-
active	Boolean	Specifies if item is active.	false
faux-link	Boolean	Should be set for SEO reasons when no href is present. Will change <a> to <span>	false

API: v-navbar-menu-item

Name	Type	Description	Default
icon	String	Specifies which icon to show. Should only be used on top-level.	-
href	String	Specifies the URL of the page the link goes to.	-
target	String	Specifies where to open the linked document.	-
title	String	HTML title Attribute.	-
active	Boolean	Specifies if item is active.	false
slot: items	Slot	Insert child v-navbar-menu-item components here. Will be shown in dropdown.	-

API: v-navbar-search

Name	Type	Description	Default
title	String	Title of the navigation search element	-

Notice

If a url provided as href contains the query parameter SC_LOCKED the item will be styled as locked.

Secondary navigation

The secondary navigation is a sidebar placed on the left-hand side of the content area. On mobile, both the primary and secondary navigation items are presented together in a hamburger menu.

The sidebar is built using the v-sidebar and v-sidebar-item components and must be placed in the #sidebar slot of the v-content component. See example markup in the Code tab above.

API: v-sidebar

Name	Type	Description	Default
title	String	Sidebar title shown only in mobile view.	-
locales	Object	An object that associate locales with urls. Should be identical to the object provided to v-language-selector.	{}
slot: mobile-footer	Slot	Insert content to be shown in sidebar footer on mobile.	No mobile footer

API: v-sidebar-item

Name	Type	Description	Default
badge-count	String	Use to show a badge count after the item, e.g. to indicate unread messages.	-
href	String	Specifies the URL the link goes to.	-
target	String	Specifies where to open the linked document.	-
title	String	HTML title attribute.	-
item-path	String	Overrides the href value to help detect if active	-
active	Boolean	Specifies if item is active.	false