Skip to main content

Slideout

Usage​

Like a modal window, a slide out panel is a child “window” which appears in front of the main content. They are an effective way to show and hide content that is only needed for short interactions.

Common Characteristics​

All slide out panels appear on a 50% opacity black background by quickly sliding into view from the left or right side of the main window. Animation timing is preset to slide-in 250ms and slide out 200ms. They always have a heading, and a close function, plus additional content and controls. All slide out panels are the full height of the window, and width varies (see below).

While visible a slide out panel prevents the user from interacting with the main page. A user may close a slide out panel by clicking on the main window, or keyboard ESC, or “X”, or an action button.

<div className="interstate-docs__usage-demo interstate-sandbox interstate-sandbox">
  <div className="container bg-white">
    <div className="row pt-3 pb-3">
      <div className="col-6">
        <SlideOut triggerText="LEFT SLIDE OUT PANEL">
          <SlideOutHeader>
            <h1>THIS IS A SLIDE OUT PANEL</h1>
          </SlideOutHeader>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
            euismod bibendum. Proin sodales pulvinar sic tempor. Sociis natoque
            penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            Magnis dis parturient montes, nascetur ridiculus mus.
          </p>
        </SlideOut>
      </div>
      <div className="col-6 d-flex justify-content-end">
        <SlideOut placement="right" triggerText="RIGHT SLIDE OUT PANEL">
          <SlideOutHeader>
            <h1>THIS IS A SLIDE OUT PANEL</h1>
          </SlideOutHeader>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
            euismod bibendum. Proin sodales pulvinar sic tempor. Sociis natoque
            penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            Magnis dis parturient montes, nascetur ridiculus mus.
          </p>
        </SlideOut>
      </div>
    </div>
  </div>
</div>

Usage Guidelines​

Slide out panels should be used for content that is only needed occasionally and should only be displayed at the user’s request. Use slide out panels instead of modal windows for complex interactions like long forms, or filters, or navigation menus.

Width​

The width of a slide panel is not defined in order to allow designers to specify the width needed by the content in the design. It is recommended to specify the maximum width needed by number of columns or percent of screen, and the minimum width by pixels.

At the XS breakpoint, the slide out panel covers the full screen width.

Interaction​

When a slide out panel is open, all functionality on the main window should be disabled including scrolling.

When the content of the slide out panel requires scrolling, any submit/cancel buttons should be locked to the bottom of the panel to remain visible.

Accessibility​

Allow the user to dismiss a slide out panel using the keyboard's ESC key, or by clicking the main window, or by clicking close (“X”).

Design​

SlideOut from left​

slideout left

SlideOut from Right​

slideout right

Code​

Default SlideOut​

<SlideOut triggerText="Open SlideOut" headerText="H1 Heading">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean 
    euismod bibendum. Proin sodales pulvinar sic tempor. Sociis natoque 
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
    Magnis dis parturient montes, nascetur ridiculus mus.
  </p>
</SlideOut>

The default slide out appears from the left

SlideOut from Left​

<SlideOut
  placement="left"
  triggerText="Open Left SlideOut"
  headerText="H1 Heading"
>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean 
    euismod bibendum. Proin sodales pulvinar sic tempor. Sociis natoque 
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
    Magnis dis parturient montes, nascetur ridiculus mus.
  </p>
</SlideOut>

SlideOut from Right​

<SlideOut
  placement="right"
  triggerText="Open Right SlideOut"
  headerText="H1 Heading"
>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean 
    euismod bibendum. Proin sodales pulvinar sic tempor. Sociis natoque 
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
    Magnis dis parturient montes, nascetur ridiculus mus.
  </p>
</SlideOut>

SlideOut with maximum width​

<SlideOut
  placement="right"
  triggerText="Open SlideOut"
  headerText="H1 Heading"
  maxWidth="50vw"
>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean 
    euismod bibendum. Proin sodales pulvinar sic tempor. Sociis 
    natoque penatibus et magnis dis parturient montes, nascetur 
    ridiculus mus. Magnis dis parturient montes, nascetur ridiculus 
    mus.
  </p>
</SlideOut>

SlideOut with fixed width​

The Slide Out width is meant to be determined by its content. The maxWidth prop is recommended to specify the width of a slideout that should not take up the full view width. However, a fixed with can be added to the slideout content by manually setting the styled width.

<SlideOut
  placement="right"
  triggerText="Open SlideOut"
  headerText="H1 Heading"
>
  <div style={{width: '50vw'}}>
    <p>
      Small slideout content
    </p>
  </div>
</SlideOut>

The defined content width must be in either px, em, rem, or vw, but cannot be percentage(%) based. The width of the Slide Out can also be managed in CSS by targeting the .slide-out-body class.

Actionable SlideOut with custom trigger​

function ActionableSlideOut() {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    <div>
      <SlideOut 
        actionable 
        onCloseButtonClick={toggle} 
        open={isOpen}
      >
        <SlideOut.Header><h2>Custom Header</h2></SlideOut.Header>
        <p>Slideout content goes here</p>
        <Button onClick={toggle} outline>
          Custom Close Button
        </Button>
      </SlideOut>
      
      <SlideOut.Trigger onClick={toggle} text="Custom Trigger"/>
    </div>
  );
}

The actionable prop gives up control of the inital open state to the SlideOut component's open prop, allowing for customization.

Props​

NameTypeDefaultDescription
actionablebooleanfalseGives up control of the SlideOut component’s open state to the open prop, allowing for customization. If this is true, onCloseButtonClick must also be defined.
headerTextstringundefinedSets the text for an h1 header element displayed in the slideout
maxWidthstringundefinedSets the maximum styled width for the slideout
onCloseButtonClickfunction() => {}Sets the function called when the close button is clicked in an actionable slideout
openbooleanfalseSets the initial open state for the slideout. For actionable slideout, controls the open state.
placementstring"left"Sets whether the slideout slides in from the left or the right
triggerClassNamestring"btn btn-outline"Sets the class name on the slideout trigger element
triggerHrefstringundefinedSets the href for the slideout trigger element
triggerTagstring"button"Sets the tag type for the slideout trigger element
triggerTextstringundefinedSets the text for the slideout trigger element