🧠 Header: v2.0

[lolottetheclash]

This discussion aims to set the framework for v.2 of the Header.

1 - This version will add the arrows indicating on which navigation item the user is positioned

2 - This version will also add navigation sub-menu

Concerning the behavior of these sub-menus, I suggest opening them by hovering the mouse over the menu item.

The Header navigationItems property is currently typed like this:

navigationMenu? : JSX.element []

We could change this type into:

navigationMenu?: NavigationItem []

with:

type NavigationItem = {
	item: JSX.Element
	subItems?: NavigationItem []
}

To illustrate this new data model, here is an example of a navBar with submenus:

As the example is not easy to explain, here is an extract of possible code to get to the navigation bar above:

// 1st level: Items displayed in the navigation bar => visible in 1st
const homeMenuWithoutSubItem: JSX.Element = <div>HOME</div>
const htmlMenuItem: JSX.Element = <div>HTML and CSS</div>
const jsMenuItem: JSX.Element = <div>JAVASCRIPT</div>

// 2nd level: Items displayed in the submenus

// =>  no sub-menu for the "HOME" item

// => sub-menu for "HTML & CSS"
const htmlWebDesign: JSX.Element = <div>Web Design</div>
const htmlLoginForm: JSX.Element = <div>Login Form</div>
const htmlCardDesign: JSX.Element = <div>Card Design</div>
const htmlMore: JSX.Element = <div>More</div>

// => sub-menu for "JAVASCRIPT "
const jsMenuSubItem1: JSX.Element = <div>Async</div> // to imagine
const jsMenuSubItem2: JSX.Element = <div>Loops</div> // to imagine

const jsMenuSubItems: NavigationItem[] = [{ item: jsMenuSubItem1 }, { item: jsMenuSubItem2 }]

// => 3rd level: Items displayed in a sub-menu of an item that is already part of a sub-menu
const htmlMoreNeumorphism: JSX.Element = <div>Neumorphism</div>
const htmlMorePreLoader: JSX.Element = <div>Pre-loader</div>
const htmlMoreGlassmorphims: JSX.Element = <div>Glassmorphims</div>

const htmlMoreSubMenuItems: NavigationItem[] = [
  {
    item: htmlMoreNeumorphism
  },
  {
    item: htmlMorePreLoader
  },
  {
    item: htmlMoreGlassmorphims
  }
]

const htmlSubMenuItems: NavigationItem[] = [
  { item: htmlWebDesign },
  { item: htmlLoginForm },
  { item: htmlCardDesign },
  { item: htmlMore, subItems: htmlItem4SubMenuItems }
]

const navMenu: NavigationItem[] = [
  {
    item: homeMenuWithoutSubItem
  },
  {
    item: htmlMenuItem,
    subItems: htmlSubMenuItems
  },
  {
    item: jsMenuItem,
    subItems: jsMenuSubItems
  }
]

In the current use of navigation bars, it is rare to have many sub-menus nested in each other.
In principle we will have the items/titles in the navigation bar, with 1 or 2 levels of submenus maximum.

💬 Please give me your opinion about this possible implementation @fredericvilcot @ccamel. 💬

[fredericvilcot]

@lolottetheclash

I'm not a big fan of opening the sub-menus on hover, but OK if it's the best way to achieve that, maybe we could implement it like that and then submit this issue to our future UI/UX designer 😌

Your proposal about items architecture sounds good to me, IMHO we should restrict max 1 level of submenus. If not, it will be a mess...

[lolottetheclash]

I totally agree with you about restricting the depth of submenus to 1!
If you prefer, we can open the submenus by clicking instead of hovering? @fredericvilcot

[ccamel]

For ux/ui concerns, include @MdechampG and @henigh in the discussion. 🙏

[henigh]

Just like @fredericvilcot, I dont recommend hover drop-downs.

Just because a user is hovering over something, it doesn’t necessarily mean they are intending to actually interact with it.
Users will just navigate over the screen when discovering product interfaces.

Instead, It might be wise if we copy Mac os top menu bar behaviour 👇
The idea is that a user should click one time to open the drop down, to trigger on-hover effect.

[lolottetheclash]

Good for me too !
It's true that it will be less invasive for the user👍

[MdechampG]

I agree too !