• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Testing
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
      • Failed to execute removeChild on Node
    • FAQ
    • Contributing
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
      • Option Group
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Properties
  2. Events
  3. Dependencies
    1. Depends on
    2. Graph
Components Sidenav Sidenav Accordion
(external link)

ld-sidenav-accordion #

The ld-sidenav-accordion component is a subcomponent for ld-sidenav.

Please refer to the ld-sidenav documentation for usage examples.

Properties #

Property Attribute Description Type Default
expanded expanded Indicates that the accordion section is expanded. boolean undefined
key key for tracking the node's identity when working with lists string | number undefined
preserveState preserve-state Set to false to make the accordion collapse on sidenav collapse or slide change. boolean true
ref ref reference to component any undefined
split split Split the accordion toggle in two parts with the second part containing the caret icon and being responsible for expanding / collapsing the accordion panel. boolean undefined

Events #

Event Description Type
ldSidenavAccordionTransitionEnd Emitted on accordion expand or collaps transition end. CustomEvent<any>

Dependencies #

Depends on #

  • ld-accordion
  • ld-accordion-section
  • ld-accordion-toggle
  • ld-accordion-panel

Graph #

graph TD;
  ld-sidenav-accordion --> ld-accordion
  ld-sidenav-accordion --> ld-accordion-section
  ld-sidenav-accordion --> ld-accordion-toggle
  ld-sidenav-accordion --> ld-accordion-panel
  ld-accordion-toggle --> ld-icon
  style ld-sidenav-accordion fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS