Appearance

SidePanel

DesignA11yAPIExampleChangelog

Basic example ​

tsx
import React from 'react';
import Button from '@semcore/ui/button';
import { List } from '@semcore/ui/typography';
import SidePanel from '@semcore/ui/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <React.Fragment>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel visible={visible} onClose={() => setVisible(false)} mt={20}>
        <List size={300} marker={null}>
          {['Features', 'Pricing', 'Resources', 'Company', 'Extra tools'].map((name, i, arr) => (
            <React.Fragment key={i}>
              <List.Item>{name}</List.Item>
              {i < arr.length - 1}
            </React.Fragment>
          ))}
        </List>
      </SidePanel>
    </React.Fragment>
  );
};
import React from 'react';
import Button from '@semcore/ui/button';
import { List } from '@semcore/ui/typography';
import SidePanel from '@semcore/ui/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <React.Fragment>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel visible={visible} onClose={() => setVisible(false)} mt={20}>
        <List size={300} marker={null}>
          {['Features', 'Pricing', 'Resources', 'Company', 'Extra tools'].map((name, i, arr) => (
            <React.Fragment key={i}>
              <List.Item>{name}</List.Item>
              {i < arr.length - 1}
            </React.Fragment>
          ))}
        </List>
      </SidePanel>
    </React.Fragment>
  );
};

Advanced example ​

tsx
import React from 'react';
import Button from '@semcore/ui/button';
import SidePanel from '@semcore/ui/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel visible={visible} onClose={() => setVisible(false)} mt={20}>
        <SidePanel.Close />
        <SidePanel.Header>
          <SidePanel.Back>Go to Tool Name</SidePanel.Back>
          <SidePanel.Title>Heading 6, 16px</SidePanel.Title>
        </SidePanel.Header>
        <SidePanel.Body>Content</SidePanel.Body>
        <SidePanel.Footer justifyContent='center' pt={2}>
          <Button use='primary'>Primary</Button>
          <Button ml={2}>Cancel</Button>
        </SidePanel.Footer>
      </SidePanel>
    </>
  );
};
import React from 'react';
import Button from '@semcore/ui/button';
import SidePanel from '@semcore/ui/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel visible={visible} onClose={() => setVisible(false)} mt={20}>
        <SidePanel.Close />
        <SidePanel.Header>
          <SidePanel.Back>Go to Tool Name</SidePanel.Back>
          <SidePanel.Title>Heading 6, 16px</SidePanel.Title>
        </SidePanel.Header>
        <SidePanel.Body>Content</SidePanel.Body>
        <SidePanel.Footer justifyContent='center' pt={2}>
          <Button use='primary'>Primary</Button>
          <Button ml={2}>Cancel</Button>
        </SidePanel.Footer>
      </SidePanel>
    </>
  );
};

Access to internal components ​

You can access the internal components by expanding SidePanel for SidePanel.Overlay, SidePanel.Panel or SidePanel.Close.

tsx
import React from 'react';
import Button from '@semcore/ui/button';
import { Text } from '@semcore/ui/typography';
import SidePanel from '@semcore/ui/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <React.Fragment>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel closable={false} visible={visible} onClose={() => setVisible(false)}>
        <SidePanel.Overlay>
          <SidePanel.Panel mt={20}>
            <SidePanel.Close />
            <Text size={300} tag='p'>
              Waba-laba-dub-dub!
              <Button mt={3}>I'm just a button</Button>
            </Text>
          </SidePanel.Panel>
        </SidePanel.Overlay>
      </SidePanel>
    </React.Fragment>
  );
};
import React from 'react';
import Button from '@semcore/ui/button';
import { Text } from '@semcore/ui/typography';
import SidePanel from '@semcore/ui/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <React.Fragment>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel closable={false} visible={visible} onClose={() => setVisible(false)}>
        <SidePanel.Overlay>
          <SidePanel.Panel mt={20}>
            <SidePanel.Close />
            <Text size={300} tag='p'>
              Waba-laba-dub-dub!
              <Button mt={3}>I'm just a button</Button>
            </Text>
          </SidePanel.Panel>
        </SidePanel.Overlay>
      </SidePanel>
    </React.Fragment>
  );
};

Placement ​

The component is supplied with three positioning options.

tsx
import React from 'react';
import Button from '@semcore/ui/button';
import { Text } from '@semcore/ui/typography';
import Select from '@semcore/ui/select';
import SidePanel, { SidePanelPlacement } from '@semcore/ui/side-panel';

const placements: SidePanelPlacement[] = ['left', 'right', 'bottom'];

const Demo = () => {
  const [visible, setVisible] = React.useState(false);
  const [placement, setPlacement] = React.useState(placements[1]);

  return (
    <React.Fragment>
      <Text size={300} tag='div' mb={2}>
        Placement:
      </Text>
      <Select
        value={placement}
        options={arrToOptions(placements)}
        onChange={setPlacement}
        size='l'
      />
      <Button onClick={() => setVisible(true)} use='primary' theme='success' size='l' ml={3}>
        Show SidePanel
      </Button>
      <SidePanel
        visible={visible}
        onClose={() => setVisible(false)}
        placement={placement}
        mt={placement === 'bottom' ? 0 : 20}
      >
        <Text size={300} tag='p'>
          Waba-laba-dub-dub!
        </Text>
        <Button mt={3}>I'm just a button</Button>
      </SidePanel>
    </React.Fragment>
  );
};

function arrToOptions(arr) {
  return arr.map((i) => ({ value: i, label: i, children: i }));
}
import React from 'react';
import Button from '@semcore/ui/button';
import { Text } from '@semcore/ui/typography';
import Select from '@semcore/ui/select';
import SidePanel, { SidePanelPlacement } from '@semcore/ui/side-panel';

const placements: SidePanelPlacement[] = ['left', 'right', 'bottom'];

const Demo = () => {
  const [visible, setVisible] = React.useState(false);
  const [placement, setPlacement] = React.useState(placements[1]);

  return (
    <React.Fragment>
      <Text size={300} tag='div' mb={2}>
        Placement:
      </Text>
      <Select
        value={placement}
        options={arrToOptions(placements)}
        onChange={setPlacement}
        size='l'
      />
      <Button onClick={() => setVisible(true)} use='primary' theme='success' size='l' ml={3}>
        Show SidePanel
      </Button>
      <SidePanel
        visible={visible}
        onClose={() => setVisible(false)}
        placement={placement}
        mt={placement === 'bottom' ? 0 : 20}
      >
        <Text size={300} tag='p'>
          Waba-laba-dub-dub!
        </Text>
        <Button mt={3}>I'm just a button</Button>
      </SidePanel>
    </React.Fragment>
  );
};

function arrToOptions(arr) {
  return arr.map((i) => ({ value: i, label: i, children: i }));
}

Disabling overlay ​

By default, the component is rendered with an overlay, but you can change this by not passing it.

tsx
import React from 'react';
import Button from '@semcore/ui/button';
import { Text } from '@semcore/ui/typography';
import SidePanel from '@semcore/ui/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <React.Fragment>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel visible={visible} onClose={() => setVisible(false)}>
        <SidePanel.Panel mt={20}>
          <Text size={300} tag='p'>
            Waba-laba-dub-dub!
            <Button mt={3}>I'm just a button</Button>
          </Text>
        </SidePanel.Panel>
      </SidePanel>
    </React.Fragment>
  );
};
import React from 'react';
import Button from '@semcore/ui/button';
import { Text } from '@semcore/ui/typography';
import SidePanel from '@semcore/ui/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <React.Fragment>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel visible={visible} onClose={() => setVisible(false)}>
        <SidePanel.Panel mt={20}>
          <Text size={300} tag='p'>
            Waba-laba-dub-dub!
            <Button mt={3}>I'm just a button</Button>
          </Text>
        </SidePanel.Panel>
      </SidePanel>
    </React.Fragment>
  );
};

Portals ​

By default, the component is rendered to the portal, at the bottom of the body. You can redefine this behavior with PortalProvider and disable it with disablePortal.

tsx
import React from 'react';
import Button from '@semcore/ui/button';
import { Text } from '@semcore/ui/typography';
import SidePanel from '@semcore/ui/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <React.Fragment>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel visible={visible} onClose={() => setVisible(false)} disablePortal>
        <SidePanel.Panel mt={20}>
          <Text size={300} tag='p'>
            Waba-laba-dub-dub!
          </Text>
          <Button mt={3}>I'm just a button</Button>
        </SidePanel.Panel>
      </SidePanel>
    </React.Fragment>
  );
};
import React from 'react';
import Button from '@semcore/ui/button';
import { Text } from '@semcore/ui/typography';
import SidePanel from '@semcore/ui/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <React.Fragment>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel visible={visible} onClose={() => setVisible(false)} disablePortal>
        <SidePanel.Panel mt={20}>
          <Text size={300} tag='p'>
            Waba-laba-dub-dub!
          </Text>
          <Button mt={3}>I'm just a button</Button>
        </SidePanel.Panel>
      </SidePanel>
    </React.Fragment>
  );
};

Iframe ​

We recommend not using this component inside an iframe. Instead, use modal window or dropdown.

Released under the MIT License.

Copyright © 2023-present Powered by Semrush. All rights reserved.

Released under the MIT License.

Copyright © 2023-present Powered by Semrush. All rights reserved.