[base] Rail navigation

[gfellerph]

📝 Description

A small navigation area at the left screen edge hosting links with big icons and optional text.

🎨 Design

https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations---Components-V2?node-id=29247-190930&t=R5DFzNEqfFaT421V-4

🎯 Purpose & Use Cases

Use cases are mostly applications that contain multiple sub-applications (Mail and Calendar) or used to switch between different views like main application and settings.

🔀 Variants & States

See open questions.

🔄 Dependencies & Related Components

• Sidenav: related in position and sometimes purpose but distinct in display and the ability to host nested items. Railnav can host actions other than links but cannot nest items
• Subnavigation: related in purpose of navigating to different routes with active route highlighting but different in layout and possibility of hosting diverse actions

❓ Open questions

• What variants do we need?
  • Expanded (text to the right of the icon) / collapsed (icon only or text below the icon)
    • Expanded modal (overlays the page and hides elements beneath)
    • Expanded in-place (pushes all content to the right, smaller available app space (not recommended due to layout shift))
  • Text display variants
    • No text, only icons + tooltips
    • Text below the icons (how does active state look like here? Highlight just on icon or icon + text?)
    • Text to the right of the icon (expanded variant)
  • Content slots
    • Default top aligned
    • Bottom
  • Mobile behaviour
    • Expand on desktop, collapse on mobile (Jira behaviour)
    • Always collapsed but extendable on expand button click (modal variant)
    • Always collapsed, extended version does not exist
    • Hidden on mobile together with the sidebar or similar to the sidebar if there is no sidebar, openable with the same action button in the menu as the sidebar
  • Allowed content
    • Links with active state (aria-current="page")
    • Dividers
    • Menu button
    • Drawer trigger (drawer opens in modal mode)
    • Icon button for custom actions

🔗 References

• https://m3.material.io/components/navigation-rail/overview