Panel navigation

The `.wui-panel-nav` is independent of the platform's menu and, as the name suggests, is based on the `.wui-bs-panel`. We use the subnavigation to give the user a better overview of very complex items.

Summary

Most likely you will find the subnavigation on item level. To provide a better overview, it divides very large items into several small subsections. Each subsection is in turn treated as an independent item.

That means: Within a subsection there may be a stand-alone form. In this case the form will also have the corresponding primary action in the sticky-header ("Update xyz“ where xyz is the name of the current menu item). Within a subsection there may also be an overview table from which items can be edited or newly created. In this case the primary action in the sticky header would be "New xyz" followed by the corresponding detail page/header-action.

Navigation

<div class="wui-bs-panel">
  <div class="panel-section">
    <div class="panel-heading"><h2 class="panel-title">Navigation</h2></div>
    <div class="panel-body p-0">
      <ul class="wui-panel-nav">
        <li class="wui-panel-nav__item"><a href="#">1. wui-panel-nav__item</a></li>
        <li class="wui-panel-nav__item"><a href="#">2. wui-panel-nav__item</a></li>
        <li class="wui-panel-nav__item wui-panel-nav__item--has-subnav wui-panel-nav__item--active">
          <a href="#">3. --has-subnav --active</a>
          <ul class="wui-panel-subnav">
            <li class="wui-panel-nav__item"><a href="#">3.1. wui-panel-nav__item</a></li>
            <li class="wui-panel-nav__item"><a href="#">3.2. wui-panel-nav__item</a></li>
            <li class="wui-panel-nav__item wui-panel-nav__item--active"><a href="#">3.3. --active</a></li>
            <li class="wui-panel-nav__item"><a href="#">3.4. wui-panel-nav__item</a></li>
          </ul>
        </li>
        <li class="wui-panel-nav__item"><a href="#">4. wui-panel-nav__item</a></li>
        <li class="wui-panel-nav__item"><a href="#">5. wui-panel-nav__item</a></li>
      </ul>
    </div>
  </div>
</div>

Each of these subsections must be saved before the user moves to another one. If a user changes the subsection without saving, a modal opens with two possibilities:

Cancel the user remains on the respective page
Discard changes the user leaves the page without saving the changes

Since this menu is mostly used on item level, we try to keep the navigation as flat as possible. Even if the component offers a second level, the rule is: Better a long list of menu items than nesting them.

import WuiPanelNav from "@wui/wui-vue/lib/panel-nav";

Description

The PanelNav can be used to create a vertical navigation. All menu items are stacked and you have the option to create a sub navigation (level 2) for each navigation item (level 1).

This component offers to render your navigaton by passing in a JSON object with all your menu items and properties (see props of PanelNav component).

This component uses the Panel component as a base container..

Properties

Prop	Type	Required	Default	Description
options	Array	`false`	`[]`	Array of objects containing navigation data. Each object in the array carries the neccessary props for NavItem components. If nothing passed, the component renders its children in the slot instead of generating the menu from dataset.
panelNavTitle	String	`false`	`null`	Title/Headline of the container to put in the menu header. If not used, the header slot will be rendered instead.

Slots

Name	Description
default	Use the default slot to create your navigation items. The default slot will not be rendered if you pass a JSON menu via the options prop.
header	You can pass any HTML construct for a custom header

Options data

{
  menuItemProps: {
    linkText: "linkText",
    linkAttrs: {
      href: "/url/to/my/page",
      ... any HTML attributes you want to put on the anchor tag
    }
  },
  attributes: { ... any HTML attributes you want to put on the root list element },
  listeners: {
    click: e => {
      e.preventDefault();
      ... do stuff here
      ... note: listeners will be bound to the anchor tag, not to the root list element
    }
  },
  subNavItems: [
    menuItemProps: { ... },
    attributes: { ... },
    listeners: { ... }
  ]
}

PanelNavList

import WuiPanelNavList from "@wui/wui-vue/lib/panel-nav-list";

Description

It will render a <ul/> container with the CSS class wui-panel-nav or wui-panel-subnav. Use this component to group your menu items.

Properties

Prop	Type	Required	Default	Description
isSubNav	Boolean	false	`false`	Whether or not the menu list will be a sub menu or not. If set to `true` a proper CSS class will be set to meet the wui styleguide.

PanelNavItem

import WuiPanelNavItem from "@wui/wui-vue/lib/panel-nav-item";

Description

It will render a single menu item, the list item <li/> and anchor <a/> HTML tags with proper CSS classes based on wui styleguide. You can pass any custom CSS classes to the root <li/> element in case you need them for custom layout purposes.

To add custon HTML attributes and CSS classes to the anchor <a/> tag you can use the vue props linkAttrs and linkClasses toadd any attributes or custom CSS classes.

To add the href link value you have to use the linkAttrs prop, for example <wui-panel-nav-item :link-attrs="{ href: '/link/to/my/page' }" />.

All event listeners you put on this component will be bound to the anchor <a/> element, not to the root <li/> element.

Properties

Prop	Type	Required	Default	Description
isActive	Boolean	false	`false`	Whether or not the link should have the active state or not (selected or not).
linkText	String	false	`null`	The text which will be the menu item link
linkAttrs	Object	false	{ }	Pass any HTML attributes to the anchor `<a/>` element as an object, for example `{ href: '/link/to/my/page', title: 'My link title', target: '_blank' }`
linkClasses	String \|\| Object \|\| Array	false	`null`	Pass any custom CSS classes, as a String or Object or Array of Strngs, for example String syntax `custom-css-class-1 another-css-class third-custom-css-class` Object syntax `{ active: isActive, 'text-danger': hasError }` Array syntax `['custom-class', 'another-class']`

Slots

Name	Description
default	Gets rendered instead of anchor `<a/>` html element. Use this to add your own links or any other HTML like `<span/>`, or to combine this with your vue `<router link>`.
subnav	Use this slot if you want to pass in a subnav.

PanelNavItemCollapse

import WuiPanelNavItemCollapse from "@wui/wui-vue/lib/panel-nav-item-collapse";

Description

It's offers the same as the PanelNavItem component. The difference is that it adds a collapse (toggle) functionality to the menu item. It will also render an arrow on the right side and will toggle the visibility of the subnav of this menu item.

Under the hood this component used the PanelNavItem. All attributes and props will be forwarded to the PanelNavItem component, except the isActive prop which is controlled by the WuiPanelNavItemCollapse component.

Properties

Prop	Type	Required	Default	Description
isActive	Boolean	false	`false`	Whether or not the link is selected and the subnav should be open/visible
PanelNavItem	-	-	-	Use all props from PanelNavItem component. The `isActive` prop will not be passed to PanelNavItem because it's controlled by the PanelNavItemCollapse component. You can only set the initial state.

Slots

Name	Description
default	Gets rendered instead of anchor `<a/>` html element. Use this to add your own links or any other HTML like `<span/>`, or to combine this with your vue `<router link>`.
subnav	Use this slot if you want to pass in a subnav.

Events

Event	Emitted parameters	Description
onSubNavActiveStateChange	`true false` - `Boolean`	Whether or not the subnav connected to this menu item is open or not

From WUI and

with

WUI is wescale’s design system