Merge pull request #326 from Infineon/270-documentation-navbar

270 documentation navbar

packages/components/package.json

@@ -73,4 +73,4 @@
       "released"
     ]
   }
-}
+}

packages/components/src/components/navbar/Usage.mdx

@@ -0,0 +1,163 @@
+import { Meta } from '@storybook/blocks';
+
+import * as NavbarStories from './navbar.stories';
+
+import ButtonGroupingByImportance from '../../../public-storybook/images/button/button-grouping-by-importance.png';
+import HeaderDefaultAnatomySmall from '../../../public-storybook/images/navbar/header-default-anatomy_720px.png';
+import HeaderDefaultAnatomyLarge from '../../../public-storybook/images/navbar/header-default-anatomy_1440px.png';
+import HeaderMainItemsExample from '../../../public-storybook/images/navbar/header-main-items-example.png';
+import HeaderMobileNavigation from '../../../public-storybook/images/navbar/header-mobile-navigation.png';
+import HeaderOverviewBreakpoints from '../../../public-storybook/images/navbar/header-overview-breakpoints.png';
+import HeaderSecondaryNavigationItemsExample from '../../../public-storybook/images/navbar/header-secondary-navigation-items-example.png';
+import NavigationSubmenuDividerItem from '../../../public-storybook/images/navbar/navigation-submenu-divider-item.png';
+import NavigationSubmenuItemsStates from '../../../public-storybook/images/navbar/navigation-submenu-items-states.png';
+import NavigationSubmenuItems from '../../../public-storybook/images/navbar/navigation-submenu-items.png';
+import NavigationSubmenuMultilvlItems from '../../../public-storybook/images/navbar/navigation-submenu-multilvl-items.png';
+
+<Meta of={NavbarStories} />
+
+# Navbar
+The navbar is the essential component of our design system as it represents the brand identity of our products. It is also the primary way users navigate through the website or applications.
+
+## Anatomy of desktop navbar
+<img src={HeaderDefaultAnatomyLarge} alt="Anatomy Navbar Default above 1440px" />
+
+**Logo (1)**\
+The header always starts with the brand logo. Usually the logo is left aligned.
+
+
+**Application name (2)**\
+The application name is shown right after the brand logo .
+
+
+**Divider (3)**\
+Show the separator after the application name if a main navigation is to be shown afterwards.
+
+
+**Main navigation (4)**\
+The main navigation enables users to find the information they are looking for. To sustain usability we recommend a **maximum of seven menu items**.
+
+
+**Search field (5)**\
+Optional: Use a search field if you want to enable users to search the entire website for relevant content.
+
+
+**Secondary navigation (6)**\
+The secondary menu offers the possibility of displaying further important functions of an application. Every application should design their secondary menu items to its needs. To sustain usability we recommend a **maximum of 6 menu items**.
+
+
+**Border (7)**\
+A 1px border indicates the bottom edge of the header at anytime.
+
+## Anatomy of mobile navbar
+<img src={HeaderDefaultAnatomySmall} alt="Anatomy Navbar Default below 720px" />
+
+**Logo (1)**\
+Mandatory: On any breakpoint, the brand logo is always displayed as an integral part of the header, except when the search bar is active.
+
+
+**Application Name (2)**\
+Optional: The application name **can be** shown right after the brand logo.
+
+
+**Secondary Navigation (3)**\
+It is not necessary to have the same amount of menu items on mobile headers as on desktop headers. Try to move unnecessary menu items into the mobile menu. To sustain usability we recommend a **maximum of 4 menu items**.
+
+
+**Divider (4)**\
+If the mobile menu ist not active, a 1 px border is always visible right before the burger menu icon.
+
+
+**Burger Menu Icon (5)**\
+The burger menu icon represents a collapsible menu with additional navigation options.
+
+
+**Border (6)**\
+Just like the desktop view, the mobile view has a 1px border below the header.
+
+
+## Placement
+When placing menu items, it is important to consider their relative importance and frequency of use.
+
+### Main Navigation Items
+<img src={HeaderMainItemsExample} alt="Anatomy Header Main Items" width="50%" />
+
+**Text link (1)**\
+These text links should be placed prominently in the header. They should be concise and represent the most important pages or sections of the website.
+
+
+**Expandable Submenu (2)**\
+A text item with a chevron-down icon that points to a mega-menu or a simple submenu menu and contains further subordinate menu items. This item does not lead to a different page.
+
+
+**Expanded Submenu (3)**\
+A text link with a chevron-up icon which hints that a mega-menu or a simple drop-down menu is collapsible. This item does not lead to a different page.
+
+
+**More Submenu (4)**\
+Due to space or smaller breakpoints it is possible to use a "More" text item which indicates there are more options in the 1st level navigation. Those text items should be placed inside a submenu component.
+
+
+### Secondary Navigation Items
+<img src={HeaderSecondaryNavigationItemsExample} alt="Anatomy Header Main Items" width="50%" />
+
+
+**Search (1)**\
+Always positioned at the **leftmost** position. To underline its functionality we recommend to add a "Search" label to the icon.
+
+
+**Other (2)**\
+Special or less important functions, which you can't fit into the menu, can be positioned right hand next to the search.
+
+
+**Notification (3)**\
+The notification icon is right aligned. But cart (4), profile (5) and button (6) have priority regarding the alignment.
+
+
+**Cart (4)**\
+For product websites with shopping-like functions, the cart icon is a critical item. It should be placed **third from the right**.
+
+
+**Profile (5)**\
+The profile icon is a key item of many websites, so it should be easily accessible. Place it **second from the right**.
+
+
+**Button (6)**\
+Depending on the context, the button can be used for a variety of functions such as initiating an action. Place it **rightmost** for easy accessibility.
+
+
+
+### Placement by priority
+
+The table below gives you an overview and guidance how to prioritize your secondary navigation items.
+
+  | Breakpoint | Logo      | Application name | Main navigation | Secondary navigation | Search field |
+  |------------|-----------|------------------|-----------------|----------------------|--------------|
+  | ≥1440px    | Mandatory | High             | High            | High                 | High         |
+  | ≥1200px    | Mandatory | High             | High            | High                 | Low          |
+  | ≥1024px    | Mandatory | High             | n/c             | High                 | n/c          |
+  | ≥720px     | Mandatory | Low              | n/c             | High                 | n/c          |
+  | \<720px    | Mandatory | Low              | n/c             | High                 | n/c          |
+
+
+## Mobile Navigation
+  Below the breakpoint of 1024px the navbar becomes mobile. This ensures that users with smaller devices like tablets or smartphones get the same user experience as the ones with larger devices.
+  By triggering the burger menu icon the menu icon becomes a cross icon. To apply the focus on usability and clarity all other elements except the logo and/or the application name become invisible.
+
+  <img src={HeaderMobileNavigation} alt="Header Mobile Navigation" />
+
+## Sticky header
+  In some situations our websites and applications provide a lot of content on a page and space on a screen is crucial. In those cases, we recommend to use a hidden header that only appears and stays sticky when the user scrolls/swipes up.
+
+  ### When to use
+  - If the header contains important navigation or branding elements that the user needs to access quickly.
+
+  ### When not to use
+  - If a website or application only has a few pages or a small amount of content.
+  - If a page has a specific goal, such as completing a form or making a purchase, a sticky header can be distracting and take the user's attention away from the task. In this case, it may be better to deactivate the sticky behaviour or remove the entire header.<img src={ButtonGroupingByImportance} alt="Button Group By Importance"/>
+
+
+
+  ***
+  Check out the Figma component: **[Navbar](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=19241-12529&mode=design&t=2lNZOOqATnlJOKBG-4)**
+  ***