feat: ✨ add sd-navigation-item

[mariohamann]

Description

The sd-navigation-item is a flexible component, that can be used to quickly build navigations. Examples of the item are available on Figma: https://www.figma.com/file/2hDs56yh73azMZafmpvEeU/Rework-Navigation?type=design&node-id=750-40814&mode=design&t=p1jVFPsX1m2c2TTq-4

This component doesn't provide stuff like flyouts, but instead only has the "content" of a navigation in mind.

API

The API will soon be provided in another file, but we can start already with the one over here which was discussed and approved today: https://www.figma.com/file/cvr5GpzGeJzbWIPyi5MhGY/navigation-item?type=design&node-id=0-1&mode=design&t=hENJEUnDugfazCvx-11

Props

The most important difference is the horizontal prop. If set, it can be used for top navigations. If selected, the API is very reduced:

• disabled
• current: green line at the bottom

If the element is not horizontal, the component can have a lot more options:

• disabled
• current: green line at the left
• chevron: on dev side, this might be just a boolean, as the "accordion"-functionality could be provided with a children-slot
• nested: this just provides additional padding
• size: base (default), lg, 14px
• divider: sets a divider at the top which reflects nestedness etc.

If current is set, aria-current should be added.

Slots

For vertical and horizontal the main slot is available.

The main slot can be used to set additional content like badges.

The vertical navigation-item in addition can have a description slot. It can be used to offer additional descriptions e. g. in mega menus or in sidebars as well.

The icons should be slottable as well for themability.

I would suggest implementing a children slot, where people can drop-in other sd-navigation-items. If there's something in the children slot, the chevron should show up as like in the accordion. To implement the functionality, I would suggest to use browser-built-in details and summary elements for that, to build it as fast as possible. (That's something Shoelace does in its newest version of the sl-accordion, too.)

Functionality

This is a tough one. So – the whole element should be hoverable and clickable.
When a href is provided, it will be a link, if not, it is a button, like we did for the sd-button and the sd-tag.

This is only relevant if the element doesn't have something in the children slot.

See comment below.

People should of course be able to listen to an event if there is a button.

Hand-off

The tokens hand-off will be provided soon – most of the stuff can be read from the colors already. I would propose to start measuring by eye and make the hot-potato-approach instead of doing the component only waterfally.

Components detailed requirements

• Props
  • horizontal
  • disabled
  • current
  • chevron
  • size
  • indentend
  • relaxed
  • divider
• CSS-Properties
  • ...
• Parts
  • chevron
  • icon-left
  • icon-right
  • description
  • content
  • ...
• Slots
  • icons in different states (see sd-accordion)
  • default
  • main
  • description
  • children? (only if we don't use nested)
• Stories
  • default - slot with bold everywhere (needs to be properly documented)
  • default and bold - comparison between the two
  • show how to override the hover color via parts selector to match
• Samples
  • horizontal first level (add documentation/hint to the sample which clarifies that the sds currently only provides first level and multi-level horizontal navigation will be provided in the future together with the flyout)
  • vertical behaviour including going one level deeper and swapping content

DoR

• Item has business value
• Item has been estimated by the team
• Item is clear and well-defined
• Item dependencies have been identified

DoD

• Documentation has been created/updated (if applicable)
• Migration Guide has been created/updated (if applicable)
• Relevant E2E tests (Features, A11y, Bug fixes) are created/updated
• Relevant stories (Features, A11y) are created/updated
• Implementation works successfully on feature branch

[karlbaumhauer]

@van-nguyen-ht pls move this ticket to ready as soon as you have the handoff done (Alec might be starting earlier).

[mariohamann]

I've some new information:

Due to technical implications the following is needed:

1. The user clicks on the item
2. Navigation layer closes and the corresponding overview page is displayed (here for example the overview page for "Funds")
3. If the user opens the navigation again via the burger icon, the navigation layer with level 2 appears (see screen to the right of this)
4. On level 2 it is the same again. Each click on a menu item closes the navi layer and opens the page. When the navigation is opened again, the opened Accordion is shown, i.e. the next level.

This leads to the following: If a href is provided this is more important than the button behaviour and a click on the item doesn't open the accordion/behaves as a button to send an event but really is just a link. Strange but true.

This leads to the following:

1. We provide a href attribute – if it is provided the element ALWAYS behaves as a link, if not, it always behaves as a button.
2. We provide the children slot. If something's inside, the up/down chevron shows up.
   a. If no href is provided, the button controls the click.
   b. If a href is provided, the accordion doesn't open but instead the linked page is being opened. The content of the slot is just always hidden.
3. We provide a chevron attribute, to indicate a next-page-behaviour. Maybe we even find a better wording on the way.
   a. If no href is provided, the button just emits an event.
   b. If a href is provided, the linked page is being opened.

If we realize in the future, that link and accordion behaviour should be seperated, we still could introduce a split-actions prop or whatever, which lets control both elements seperately.

---

On top we need another property: divider which was missing in my Figma file. It adds a sd-divider at the bottom which reflects the paddings of desktop/indented.

@van-nguyen-ht @coraliefeil Figma file is updated.

[mariohamann]

We updated the responsive behaviour to a property called "relaxed", which adds the padding right and left. I will update the API at the top.

[mariohamann]

As examples from the B2B showed it makes more sense to not provide the component as bold per default.

I updated the component accordingly, as we should in dev. (We only will show a story where we show a bold and a non-bold defualt slot.)

[abudd1094]

Hey @mariohamann,

Do we use "nested" as a prop to configure the behavior of "indented" and "relaxed" (the way they are shown in Figma) or should those two be props themselves?

[mariohamann]

Ah, it was nested before, now we have indented and relaxed. So we need both.

[mariohamann]

We omitted nested because sometimes there can be nested elements which aren't indented. :D