You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Originally posted by gfellerph February 24, 2023
Create an action menu button. This button shows a dropdown with a list of links on click and offers various ways to browse that list.
Following the headless-ui listbox example, a third component is used for rendering the links. This gives control over the links back to the library authors.
<post-menu-toggle><buttonclass="btn btn-primary">Trigger</button></post-menu-toggle><post-menu><h3>Title</h3><post-menu-itemhref="/"><post-iconname="3123" />
Link 1
</post-menu-item><post-menu-item>Button 1</post-menu-item><hr />
<post-menu-item>Button 2</post-menu-item></post-menu>
<post-menu> dropdown container that internally uses <post-popovercontainer> with role="menu"
<post-menu-toggle> wrapper for a toggle button
Behavior
The dropdown list should never be hidden by page boundaries. If the action menu button is placed directly at the edge of the screen, the dropdown list should adapt its alignment. Default alignment is bottom left (use post-popovercontainer)
There might be content before or after the link list
There might be cateogries of links or grouped link lists
Custom <a> and <button> or other form elements for filtering/decorating are also valid descendants, <post-menu-item> has just specific styles
Focus should move back to trigger when menu closes
Escape should close the menu
Examples of possible use cases
Language switch
Breadcrumbs on mobile
Login widget
The text was updated successfully, but these errors were encountered:
gfellerph
added
📦 components
Related to the @swisspost/design-system-components package
🍀 decision
Marks conversations where a decision has been made
and removed
🍀 decision
Marks conversations where a decision has been made
labels
Mar 10, 2023
gfellerph
changed the title
Action menu button component
[component]: Menu button
Jul 25, 2024
gfellerph
removed
💭 draft
Issue is not ready for development
🦌 fair game
This issue can potentially be closed because it no longer fits into the ecosystem
labels
Jul 25, 2024
Discussed in #1208
Originally posted by gfellerph February 24, 2023
Create an action menu button. This button shows a dropdown with a list of links on click and offers various ways to browse that list.
https://next.design-system.post.ch/?path=/story/components-internet-header-header--default (does not fulfill accessibility requirements)
Proposed API
Following the headless-ui listbox example, a third component is used for rendering the links. This gives control over the links back to the library authors.
<post-menu>
dropdown container that internally uses<post-popovercontainer>
withrole="menu"
<post-menu-toggle>
wrapper for a toggle buttonBehavior
post-popovercontainer
)<a>
and<button>
or other form elements for filtering/decorating are also valid descendants,<post-menu-item>
has just specific stylesExamples of possible use cases
Language switch
Breadcrumbs on mobile
Login widget
The text was updated successfully, but these errors were encountered: