Shoelace: Header / Nav component

Created on 28 Aug 2020  路  3Comments  路  Source: shoelace-style/shoelace

I might be missing something, but does Shoelace not provide a "Header" ("MenuBar") component?

Is it assumed that it's so easy to do it's not provided? I was thinking it might still be useful to keep the styling consistent.

Or is there a way to construct a header out of the components that are already provided, that I am not seeing?

Or is it simply not written yet?

Either way, thanks in advance for your response!

feature

Most helpful comment

There was some discussion about this in the community chat. Here are my thoughts:

Navs are too subjective to generalize. When something like this exists in a library, people feel encouraged to use it and you end up having every site/app look the same.

Navigation is more of a pattern than a component IMO.

To elaborate, there are so many ways to design a nav that it's impossible to do it with a single component. For example, a nav can be:

  • A simple list of links with horizontal/vertical styles
  • A hamburger menu with a sliding drawer
  • Bootstrap-style with logo, links, and dropdowns
  • An Apple-style horizontal scroller
  • Any other number of awesome nav designs found in the wild

By including a nav component in Shoelace, people will lean on it way too much and sites will start looking the same ("Bootstrap syndrome"). I'm not saying it will never happen, but I'd need to see a pretty convincing spec that's generic enough to fit the scope of the library, while still being really easy to customize.

It might make sense to split things up into subcomponents instead, that way navs can be composed in different ways, but that comes with its own set of challenges.

All 3 comments

There was some discussion about this in the community chat. Here are my thoughts:

Navs are too subjective to generalize. When something like this exists in a library, people feel encouraged to use it and you end up having every site/app look the same.

Navigation is more of a pattern than a component IMO.

To elaborate, there are so many ways to design a nav that it's impossible to do it with a single component. For example, a nav can be:

  • A simple list of links with horizontal/vertical styles
  • A hamburger menu with a sliding drawer
  • Bootstrap-style with logo, links, and dropdowns
  • An Apple-style horizontal scroller
  • Any other number of awesome nav designs found in the wild

By including a nav component in Shoelace, people will lean on it way too much and sites will start looking the same ("Bootstrap syndrome"). I'm not saying it will never happen, but I'd need to see a pretty convincing spec that's generic enough to fit the scope of the library, while still being really easy to customize.

It might make sense to split things up into subcomponents instead, that way navs can be composed in different ways, but that comes with its own set of challenges.

Right! That's why I avoided calling it a "Nav", because that implies function and hence a myriad of opinions on how to do navigation. I was asking simply about just the layout / visual component, which could contain anything - but would be consistent in style with the rest of the components. Quasar, for example also provides a plain Header and a Toolbar component, but does not force anything beyond that - but that might be what you're hinting at with the "subcomponents"?

Anyway, thank you for the response; I do agree that Bootstrapization best be avoided.

Yeah a toolbar component might make sense. It could handle proper spacing of buttons, dropdowns, and similar components.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

trailsnail picture trailsnail  路  4Comments

danielplatt-clx picture danielplatt-clx  路  3Comments

lamplightdev picture lamplightdev  路  7Comments

oliveratgithub picture oliveratgithub  路  5Comments

crutchcorn picture crutchcorn  路  7Comments