MenuBar

Usage

Menu Bar is a component typically used for primary navigation in an application's user interface. Its role is to help users understand where they are in the app and to navigate to other areas. It is usually the outermost level within the information architecture of an application, with the most generic subdivision of content and actions. Use it only in cases where an application being designed has distinct divisible chunks of features and/or data distribution.

It is an organism that consists of Menu Items which can not be used outside the context of the Menu Bar, therefore Menu Items are not individual molecule components in Bauhaus Design System. Each individual Menu Item represents a significant area of the app and, when clicked, takes the user to that area. By default Menu Items are navigational elements. In the future, we can consider assigning actions to the Menu Items converting them into buttons, filters, etc. Menu Bar can serve different purposes and therefore additional functionalities will be added as required.

Types

There are 2 main types (Types in this case) of Menu Bar:

Light bg - is used when we require a Menu Bar with a light background.
Dark bg - is used when we require a Menu Bar with a dark background, in this case background based on the primary brand color.

We have these two Types, because the scopes of use for Menu Bar component are yet to be explored as our application portfolio will grow.

Anatomy and Behavior

Anatomy

Menu Item container - is a clickable area of the Menu Item. It has the same fill color as the background it sits on.
Menu Item icon - is a visually descriptive icon to support Label text and help users identify the Menu Item’s purpose at a glance. Some specific icons will have to be learned by users since the industries Bauhaus Design System serves for are very technical and have a learning curve. In future, in case of abundantly used and/or self-explanatory Icons in the Menu we can hide the Label text completely from the Menu Item and instead use Tooltip to show the label while hovering. This can only be applied cautiously after a series of usability tests.
Label text - is a descriptive text of Menu Item. It is an optional property, that can be present or hidden. It must be clear and concise. The Label text should, ideally, be one word and must not exceed two. When the Label text is too long, consider removing it and adding it in the Tooltip to be shown only on hover. However, this should be done sparingly and cautiously. Label text can not wrap to the next line and can not exceed the maximum width set for it. Therefore it is crucial to consider the best fitting short text to describe the Menu Item Primary within these size limitations.
Menu container - is the container of the Menu Bar wrapping and containing all the Menu Items required for the applications as the primary navigation element. In Vue it also controls all the dependencies between the contents, which is why Menu Items can not be used individually without the context. These dependencies are described below in the States section. Menu Bar groups and displays Menu Items in two different layouts: Top aligned and Bottom aligned. They can be used both at the same time or only one at a time.
Top aligned contents - these Menu Items are aligned to the top of the Menu bar and have higher semantic importance for the application. These are usually main pages and/or functionalities for which the application is built for.
Bottom aligned contents - these Menu Items are aligned to the bottom of the Menu Bar and have secondary semantic importance for the application. These are usually additional pages and/or functionalities to augment the user experience, such as settings, user’s account details page, logout button, etc.
Menu Item content - is the area in the viewport that displays the corresponding content or page after clicking any of the Menu Items. It is a dynamic placeholder component that exists only in Vue and receives the content in each use case.

States

Menu Item is the clickable area in Menu Bar component. It changes the state from Unselected to Selected when user clicks on it, and the user is redirected to the corresponding page. When Menu Item is Unselected it can have the :hover, :active, :focus and Disabled states. But when it is Selected it is not clickable anymore therefore it does not have any other state. Clicking on another Menu Item (or exiting the pages corresponding to this specific Menu Item) deselects it.

Gaps and Sizes

MENU ITEM

Icon width and height: XL
Container width and height: 4XL
Horizontal padding: XS
Gap between Icon and Label text: XS
Icon and Label text are both center aligned vertically and horizontally
Label text width: the guideline is that Label text should fit within the container’s fixed size and paddings without overflowing or wrapping to the next line.

MENU BAR

Menu Bar height: Adapts to the viewport height.
Menu Bar width: 4XL
Menu Bar horizontal padding: XS
Menu Bar vertical padding: 2XL
Gap between Menu Items: L
Constraints: Top aligned contents are constrained to the top and Bottom aligned contents are constrained to the bottom of the Menu Bar.
Gap between Top aligned contents and Bottom aligned contents: Space between

INFO

Note: When the number of required Menu Items for Top aligned content and/or Bottom aligned content is so high that Menu Items can come close in the middle of the Menu Bar, refrain from using both alignment types, and instead use only one type at a time.

Tokens

SCSS Variable

Value

$menuBar-lightTheme-color

--bds-brand-primary-color

$menuBar-darkBg-color

--color-grey-93

$menuBar-dark-boxShadow--hover

--primary-embossed-1

$menuBar-dark-boxShadow--active

--primary-debossed-2

Properties

export interface MenuItemProps {
  lightTheme?: boolean;
  icon?: IconName;
  id: string;
  name: string;
  selected?: boolean;
  disabled?: boolean | undefined;
};

export interface MenuBarProps {
  lightTheme?: boolean;
  modelValue: string;
  menuElements?: MenuItemProps[]| undefined;
  menuElementsBottom?: MenuItemProps[]| undefined;
}

Configurations

Developer Notes

The MenuBar component renders a vertical menu with top and bottom sections.
Menu items are provided via the menuElements and menuElementsBottom props, both of which are arrays of MenuItemProps.
Each menu item must have a unique id (string).
The modelValue prop (string) controls the selected menu item's id.
The component emits an update:modelValue event when a menu item is clicked, passing the selected item's id.
A default "Apps" button is rendered at the top using the MenuButton component.
The bottom section (menuElementsBottom) allows for custom actions via the actions slot.
lightTheme prop toggles between light and dark themes.

vue

<script>

import { MenuBar } from '@pohlcon/design-system';
import { AvatarCompact, TheLanguageSelector } from '@pohlcon/design-system';

const menuExampleTop: MenuItemProps[]  = [
  { id: '1', name: 'Filter',   icon: 'filter'},
];

const menuElements: MenuItemProps[] = [
  { id: '2', name: 'Pohlcon',  icon: 'pohlcon_logo', disabled: true },
  { id: '3', name: 'planning', icon: 'union'},  
  { id: '4', name: 'options',  icon: 'more_options'},
];
const menuExampleBottom : MenuItemProps[] = [
  { id: '5', name: 'logout',   icon: 'logout'},
];

const modelValue = ref('');

</script>

<template>
  <MenuBar 
    v-model="modelValue" 
    :menuElementsCenter="menuElements" 
    :menuElementsBottom="menuExampleBottom"
    :menuElementsTop="menuExampleTop"
  >
      <template #actions>
        <AvatarCompact userName="Laura"/>
        <TheLanguageSelector />
      </template>
  </MenuBar>
</template>

NOTE

There is a slot in the MenuBar component where you can incorporate other components such as the Language Selector or the Avatar Compact. In the example below, we use a div to wrap these elements, but it is not necessary if you only have one element to add.

vue

<script>

import { MenuBar } from '@pohlcon/design-system';
import { AvatarCompact, TheLanguageSelector } from '@pohlcon/design-system';

const menuExampleTop: MenuItemProps[]  = [
  { id: '1', name: 'Filter',   icon: 'filter'},
];

const menuElements: MenuItemProps[] = [
  { id: '2', name: 'Pohlcon',  icon: 'pohlcon_logo', disabled: true },
  { id: '3', name: 'planning', icon: 'union'},  
];
const menuExampleBottom : MenuItemProps[] = [
  { id: '5', name: 'logout',   icon: 'logout'},
];

const modelValue = ref('');


</script>

<template>
  <MenuBar 
    v-model="modelValue" 
    :menuElements="menuElements" 
    :menuElementsBottom="menuExampleBottom"
  >
    <template #actions>
        <AvatarCompact userName="Laura" background="dark"/>
        <TheLanguageSelector />
    </template>
  </MenuBar>
</template>

MenuBar ​

​

Usage ​

Types ​

Anatomy and Behavior ​

Anatomy ​

States ​

Gaps and Sizes ​

Tokens ​

Properties ​

Configurations ​

Developer Notes ​