Sliding Menu

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/sliding-menu

Usage

import { SlidingMenu } from "@reactbytes/sliding-menu";

export default function Example() {
  return (
    <SlidingMenu />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | textColor | color | #ffffff | Default text color for labels, headings, and toggle controls. | | accentColor | color | #0055ff | Accent color for line numbers, active details, and text shadows. | | primaryColor | color | #0055ff | Background color of the first staggered decorative sliding panel. | | secondaryColor | color | #f2eee9 | Background color of the second staggered decorative sliding panel. | | neutralColor | color | #111111 | Main background color of the core links drawer canvas layer. | | hoverBgColor | color | #222222 | Background block fill color applied behind a link item on hover. | | duration | number | 0.7 | Total runtime speed in seconds for the panel opening and closing transitions. | | panelWidth | string | w-full [@container_(min-width:480px)]:w-[28em] [@container_(min-width:1024px)]:w-[35em] | Responsive width classes matching parent container context query rules. | | borderRadius | string | rounded-none [@container_(min-width:768px)]:rounded-l-2xl | Boundary clipping curvature classes applied across inner backing layers. | | linkFontSize | string | text-[2.75em] [@container_(min-width:480px)]:text-[3.5em] [@container_(min-width:768px)]:text-[4.5em] [@container_(min-width:1025px)]:text-[5.625em] | Scale rules tracking contextual typography layout sizing variations. | | fontFamily | string | font-sans | Core structural interface custom layout typography class context parameter. |

Presets

This component includes the following design presets:

• Default Blue (default)
• Cyber Green (cyber)
• Sunset Rose (sunset)

Credits & Inspiration

Libraries

• GSAP - Animation Engine

Project Author

• ChandruMIT-o - Creator & Lead Designer

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Sliding Menu.