Side Drawer

Kickstand UI's side-drawer component enables quick access to interactive menus and content anywhere in your application.

Open Drawer

“I’m not a millionaire. I thought I would be by the time I was 30, but I wasn’t even close. Then I thought maybe by 40, but by 40 I had less money than I did when I was 30.”

– Michael Scott

<ks-button shows="basic_drawer">Open Drawer</ks-button>
<ks-side-drawer header-text="Basic Drawer" id="basic_drawer">
    <p>“I’m not a millionaire. I thought I would be by the time I was 30, but I wasn’t even close. Then I thought maybe by 40, but by 40 I had less money than I did when I was 30.”</p>
    <p>– Michael Scott</p>
</ks-side-drawer>

Position

Open Left Drawer Open Right Drawer

“I am running away from my responsibilities. And it feels good.”

– Michael Scott

“I’m not usually the butt of the joke. I’m usually the face of the joke.”

– Michael Scott

    <ks-button shows="left_drawer">Open Left Drawer</ks-button>
    <ks-button shows="right_drawer">Open Right Drawer</ks-button>
    <ks-side-drawer position="left" header-text="Left Drawer" id="left_drawer">
        <p>“I am running away from my responsibilities. And it feels good.”</p>
        <p>– Michael Scott</p>
    </ks-side-drawer>
    <ks-side-drawer position="right" header-text="Right Drawer" id="right_drawer">
        <p>“I’m not usually the butt of the joke. I’m usually the face of the joke.”</p>
        <p>– Michael Scott</p>
    </ks-side-drawer>

Sizes

Open Small Drawer
Open Medium Drawer
Open Large Drawer
Open X-Large Drawer

“And I knew exactly what to do. But in a much more real sense, I had no idea what to do.”

– Michael Scott

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”

– Michael Scott

“Abraham Lincoln once said that ‘If you’re a racist, I will attack you with the North,” and these are the principles I carry with me in the workplace.”

– Michael Scott

“As it turns out, you can’t just check someone into rehab against their will. They have to do it voluntarily. They have to hit rock bottom. So I think I know what I need to do at this point. I need to find ways to push Meredith to the bottom. Um. I think I can do it.”

– Michael Scott

<ks-button shows="sm_drawer">Open Small Drawer</ks-button>
<ks-button shows="md_drawer">Open Medium Drawer</ks-button>
<ks-button shows="lg_drawer">Open Large Drawer</ks-button>
<ks-button shows="xl_drawer">Open X-Large Drawer</ks-button>

<ks-side-drawer size="sm" header-text="Small Drawer" id="sm_drawer">
    <p>“And I knew exactly what to do. But in a much more real sense, I had no idea what to do.”</p>
    <p>– Michael Scott</p>
</ks-side-drawer>
<ks-side-drawer size="md" header-text="Medium Drawer" id="md_drawer">
    <p>“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”</p>
    <p>– Michael Scott</p>
</ks-side-drawer>
<ks-side-drawer size="lg" header-text="Large Drawer" id="lg_drawer">
    <p>“Abraham Lincoln once said that ‘If you’re a racist, I will attack you with the North,” and these are the principles I carry with me in the workplace.”</p>
    <p>– Michael Scott</p>
</ks-side-drawer>
<ks-side-drawer size="xl" header-text="X-Large Drawer" id="xl_drawer">
    <p>“As it turns out, you can’t just check someone into rehab against their will. They have to do it voluntarily. They have to hit rock bottom. So I think I know what I need to do at this point. I need to find ways to push Meredith to the bottom. Um. I think I can do it.”</p>
    <p>– Michael Scott</p>
</ks-side-drawer>

Showing and Hiding

If you are using the <ks-button> element you can take advantage of the shows and hides properties to open and close any of the components built using the overlay component.

Show Drawer using Button Close

<ks-button shows="button_drawer">Show Drawer using Button</ks-button>
<ks-side-drawer header-text="Basic Drawer" id="button_drawer">
    <ks-button hides="button_drawer">Close</ks-button>
</ks-side-drawer>

You can also programmatically show and hide side-drawers. It is as simple as using JavaScript to select the element and call the show() or hide() methods. Here is a simple example that will show the side-drawer when the button is clicked and hide it after 3 seconds.

Show Drawer

I will close in 3 seconds...

<ks-button id="test_button">Show Drawer</ks-button>
<ks-side-drawer header-text="Basic Drawer" id="test_drawer">
    <p>I will close in 3 seconds...</p>
</ks-side-drawer>
<script>
    let $testButton = document.getElementById('test_button');
    let $testDrawer = document.getElementById('test_drawer');

    // add click event listener to button
    $testButton.addEventListener('click', () => {
        // show loading overlay
        $testDrawer.show();

        // hide after 3 seconds
        setTimeout(() => $testDrawer.hide(), 3000);
    });

    // using DOM utils
    let $testDrawer = document.getElementById('test_drawer');

    // add click event listener to button
    $('#test_button').on('click', () => {
        // show loading overlay
        $testDrawer.show();

        // hide after 3 seconds
        setTimeout(() => $testDrawer.hide(), 3000);
    });
</script>

Accessibility

The side-drawer component is built using the <ks-overlay> component and inherits accessibility features from that such as:

• The side-drawer has the role="dialog" to help assistive technology identify the side-drawer's content as being grouped and separated from the rest of the page content.
• When opened, the focus will be set on the first clickable element within the side-drawer.
• The element that triggered the side-drawer will have the attribute aria-expanded="true" automatically added.
• When the user tabs, the focus will stay isolated within the side-drawer to prevent elements outside the side-drawer from being selected.
• When the side-drawer is closed, the focus will go back to the element the user was on before the side-drawer was opened so they do not lose their place in the document.
• Once the side-drawer is closed, the element that triggered the side-drawer will have the attribute aria-expanded="true" automatically added.
• The side-drawer title will be used to label the side-drawer using the aria-labelledby attribute.
• The side-drawer can be closed using the esc key for keyboard users.
• If you are using the shows and hides controls on the <ks-button> component, the button will automatically be populated with the appropriate aria-haspopup, aria-expanded, and aria-controls attributes on the button.

Properties

Property	Attribute	Description	Type	Default
headerText	header-text	The text that will display at the top of the Side-Drawer	string	undefined
position	position	Where on the viewport the drawer will come from	"left" or "right"	'left'
size	size	How wide the Side-Drawer will be	"lg", "md", "sm", or"xl"	'sm'

Events

Event	Description	Type
hidden	emitted when drawer is hidden	CustomEvent<any>
shown	emitted when drawer is shown	CustomEvent<any>

<ks-side-drawer id="my_drawer">
    ...
</ks-side-drawer>

<script>
    let $myDrawer = document.getElementById('my_drawer');

    $myDrawer.addEventListener('hidden', () => {
        // do something...
    });

    // using DOM utils
    $('#my_drawer').on('hidden', () => {
        // do something...
    });
</script>

Methods

hide() => Promise<void>

Returns

Type: Promise<void>

show() => Promise<void>

Returns

Type: Promise<void>