3F Design v1.135.1

# Navigation

# Default navigation

# 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.

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

# 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. -
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

← Footer →