Context

A contextual panel, overlaying the main content, which can house a variety of actionable components.

Markup structure

Firstly, you need a trigger component, which is usually a Button. Wrap your trigger component and <div class="Context"> inside <div class="ContextContainer js-ContextContainer">. When .ContextContainer js-ContextContainer is clicked, an is-active class will be added, which activates the Context panel.

<div class="ContextContainer js-ContextContainer is-active">
            <button class="Button is-active" type="button">Toggle</button>
            <div class="Context">
                // Context content goes here
            </div>
        </div>

You can also use a Link as your trigger component. The caret will always be centered on its x-axis and your Context panel will be positioned automatically.

Toggle 
<div class="ContextContainer js-ContextContainer">
            <button class="Button" type="button">Toggle</button>
            <div class="Context">
                // Context content goes here
            </div>
        </div>

Adding content

There are no limitations restricting which components can be placed inside a Context component. Child components do not receive any style modifications when placed inside a Context component.

Below is an example with some ListItem components.

First link Second link Third link Fourth link 
<div class="ContextContainer js-ContextContainer is-active">
            <button class="Button is-active" type="button">Toggle</button>
            <div class="Context">
                // Context content goes here
            </div>
        </div>

You can add a Divider to separate groups of ListItem components.

First link Second link Third link
Fourth link 
<div class="ContextContainer js-ContextContainer is-active">
            <button class="Button is-active" type="button">Toggle</button>
            <div class="Context">
                // Context content goes here
            </div>
        </div>

You can add a Divider to separate groups of ListItem components.

First link Second link Third link
Fourth link 
<div class="ContextContainer js-ContextContainer is-active">
            <button class="Button is-active" type="button">Toggle</button>
            <div class="Context">
                // Context content goes here
            </div>
        </div>

You can add a Divider to separate groups of ListItem components.

First link Second link Third link
Fourth link 
<div class="ContextContainer js-ContextContainer is-active">
            <button class="Button is-active" type="button">Toggle</button>
            <div class="Context">
                // Context content goes here
            </div>
        </div>

You can add a Loader to load while content is loading.

<div class="ContextContainer js-ContextContainer is-active">
            <button class="Button is-active" type="button">Toggle</button>
            <div class="Context">
                // Context content goes here
            </div>
        </div>

Right-align

Firstly, you need a trigger component, which is usually a Button. Wrap your trigger component and <div class="Context"> inside <div class="ContextContainer js-ContextContainer">. When .ContextContainer js-ContextContainer is clicked, an is-active class will be added, which activates the Context panel.

<div class="ContextContainer js-ContextContainer is-active">
            <button class="Button is-active" type="button">Toggle</button>
            <div class="Context">
                // Context content goes here
            </div>
        </div>

Dropup

Firstly, you need a trigger component, which is usually a Button. Wrap your trigger component and <div class="Context"> inside <div class="ContextContainer js-ContextContainer">. When .ContextContainer js-ContextContainer is clicked, an is-active class will be added, which activates the Context panel.

<div class="ContextContainer js-ContextContainer is-active">
            <button class="Button is-active" type="button">Toggle</button>
            <div class="Context">
                // Context content goes here
            </div>
        </div>