SidePanel

A slide-in panel that overlays the page from any edge. Use it for navigation drawers, filter panels, detail views, or any contextual content that shouldn't interrupt the main flow.

Playground

Open panel

Controls

Open

Anchor

Size

Label

No Close Button

Backdrop Blur

Overlay Opacity

Labels

Theme

HTMLReact

ShareCopy

Usage

<lt-button onclick="document.getElementById('panel').open = true">Open</lt-button>

<lt-sidepanel id="panel" label="Settings" anchor="start" size="320px">
<div style="padding: var(--lt-spacing-5);">
  <p>Panel content goes here.</p>
</div>
</lt-sidepanel>

<script>
document.getElementById('panel').addEventListener('close', () => {
  document.getElementById('panel').open = false;
});
</script>

<!-- Hide the built-in close button -->

<lt-sidepanel label="No close btn" no-close-button>...</lt-sidepanel>

import { useState } from 'react';
import { SidePanel, Button } from '@latty-ds/react';

export default function Example() {
const [open, setOpen] = useState(false);

return (

<>
<Button variant="primary" onClick={() => setOpen(true)}>Open panel</Button>

    <SidePanel
      open={open}
      label="Settings"
      anchor="start"
      size="320px"
      onClose={() => setOpen(false)}
    >
      <div style={{ padding: 'var(--lt-spacing-5)' }}>
        <p>Panel content goes here.</p>
      </div>
    </SidePanel>
  </>

);
}

<script setup>
import { ref } from 'vue'
const open = ref(false)

</script>

<template>
<lt-button variant="primary" @click="open = true">Open panel</lt-button>

<lt-sidepanel
:open="open"
label="Settings"
anchor="start"
size="320px"
@close="open = false">

<div style="padding: var(--lt-spacing-5);">
<p>Panel content goes here.</p>
</div>
</lt-sidepanel>

</template>

API