4.0.4 • Public • Published


    An Accordion is a device which presents a hierarchical set of items in which only a single branch of that hierarchy may be exposed at one time. Accordions are not commonly used for direct action or data manipulation. Use Accordions for navigation within a master-detail navigational pattern. Consider Trees for more complex navigation.


    Web Components Usage

    1. Installation

    Install the Astro UXDS Accordion package via Command Line (Preferred Method)

    npm i --save @astrouxds/rux-accordion

    You may use Yarn, NPM, or your Node package manager of choice. The --save flag adds this component as a dependency in your package.json file.

    Alternatively, download the Astro UXDS Component Library source to your project.

    Via CLI:

    git clone https://github.com/RocketCommunicationsInc/astro-components.git

    Or, download the Astro UXDS Components as a .zip

    2. Import the Astro Accordion Web Component

    This example assumes you're using the NPM package in node_modules. Otherwise, import the component using the path to the Astro Components directory in your project.

    import { RuxAccordion } from "@astrouxds/rux-accordion/rux-accordion.js";

    3. Render the Astro Accordion Web Component

    Render any HTML or string within the named slots. The Boolean open attribute of the Astro UXDS Accordion custom element expands that accordion on load or mount:

    <rux-accordion open>
      <span slot="label">Accordion title</span>
      <span slot="content">Accordion content</span>
      <span slot="label">
        Another accordion title, with <b>HTML</b>
      <span slot="content">
        <div>Accordion <b>HTML</b> here</div>


    Property Type Default Required Description
    open Boolean false No When set to true, opens this accordion item on mount or update. By default, all accordions are closed. Multiple accordions can be open at the same time.

    Basic HTML Usage

    1. Include the Astro UXDS CSS file

    Latest release is available in the static css directory.

    <link rel="stylesheet" href="/your-project/path/astro.css" />

    2. Markup the component using HTML and the Astro CSS classes

    Astro CSS classes follow the BEM-style naming convention.

    The Boolean open attribute of the<details> HTML element sets an accordion's open state, as defined by default browser behavior for the HTML Details/Summary pattern.

     <div class="rux-accordion">
      <details class="rux-accordion__item" open>
        <summary class="rux-accordion__label">
          Accordion title
        <div class="rux-accordion__content">
          Accordion content


    Attribute Type Default Required Description
    open Boolean false No While this attribute is present on the component, this accordion is open. By default, all accordions are closed. Multiple accordions can be open at the same time.

    For more information about AstroUXDS usage outside of a Web Component environment, please see Astro UXDS Stylesheets

    Revision History

    • Introduced new Details/Summary pattern and flattened usage to support a simple parent/child relationship. Recursive child accordions not supported at this time, but may come in a future update.
    • Replaced Polymer 3 implementation with LitElement for improved speed and interoperability with JS Frameworks as well as simpler template declaration now available in vanilla JavaScript.




    npm i @astrouxds/rux-accordion

    DownloadsWeekly Downloads






    Unpacked Size

    11.3 kB

    Total Files


    Last publish


    • avatar
    • avatar
    • avatar
    • avatar