Overview

Frame provides page navigation layout specific to a particular context eg.. User account.

Summarise it!

✨ This is an auto-generated AI summary of the ns-frame's documentation. It may not be accurate. ✨

Examples

Guidance

Do

• Keep labels short, ideally single words.
• Minimise the number of menu options.
• Strive for concise labels.
• Ensure labels are composed of words that resonate with customers.
• Use this as the primary navigation.
• Utilise the account menu in the header for customer account management items.
• Employ menu items as overarching categories for customer content.

Don't

• Nest one navigation within another – it can confuse the user experience.
• Use business terminology for the labels on the navigation.
• Hide navigation items unless absolutely necessary.
• Use menu items to link to pages outside of the logged-in experience.
• Place core account management items within the left-hand menu.
• Incorporate actions as navigation menu items.

Implementation

Placement

The ns-frame component can only be used as a child of the <main> element.

Specification

Attributes

active-button

Property

activeButton

Description

The optional button index that needs to be selected by default.

Type

number

Default

undefined

name

Property

name

Description

The account holder name that needs to be displayed.

Type

string

Default

undefined

show-search

Property

showSearch

Description

The toggle to show search option in the header.

Type

boolean

Default

false

hide-buttons

Property

hideButtons

Description

The toggle to hide the navigational buttons.

Type

boolean

Default

false

hide-menu

Property

hideMenu

Description

The toggle to hide the menu in the header.

Type

boolean

Default

false

ignore-prefix-path

Property

ignorePrefixPath

Description

The path pattern to be ignored from the window location to match the button navigation link.

Type

string

Default

buttons

Property

buttons

Description

The list of button objects. Each button has navigation link.

Type

Array

Default

[]

menu

Property

menu

Description

The list of menu items that needs to be displayed in the navigation header.

Type

Array

Default

[]

type

Property

type

Type

string

Default

standard

Slots

Slot	Permitted tags	Description
Anonymous slot		The anonymous slot for the content that needs to be displayed.

Events

Name	Description
search-click	Dispatched when the search option is clicked.
menu-click	Dispatched when the menu item is clicked. It holds the menu details.
logout-click	Dispatched when the logout CTA is clicked from the account menu.
button-click	Dispatched when the navigational button is clicked. It holds the button details.

Specification notes

Buttons structure

[
  {
    "icon" : "meter",
    "label" : "Meters",
    "url" : "/url/to/meter/page"
  }
  ...
]

Menu structure

[
  {
    "label" : "Energy account",
    "data" : [
      {
        "label" : "Address",
        "value" : "123 Kings Road, Townsville, AA12 3BB",
        "links" : [
          {
            "label" : "Switch address",
            "url" : "/url/to/switch-address",
            "icon" : "location"
          },
          ...
        ]
      },
      ...
    ]
  },
  ...
]