SidePiece API

Getting App Size Sensitivity has never been easier.When your main menu just isn't enough anymore, let SidePiece slide in with quick in-and-out access. Auto-detect navigation links and inject a responsive hamburger menu with one line of code. Your main nav doesn't need to know.

What SidePiece does

• Auto-detects links - Scans your nav and mirrors links to a mobile drawer
• Injects hamburger button - Adds a three-line icon that transforms to an X
• Creates slide-out drawer - Smooth animation from the right side
• Respects Universal Network Bar - 30px top offset built in
• Zero dependencies - Pure vanilla JavaScript, no framework required
• Theme customization - Match your brand colors with simple config

Live Demo

See SidePiece in action. Resize your browser to see the hamburger appear at 768px.

Quickstart

Start exposing what's in your drawers in under 30 seconds. Unlike my marriage counselor, SidePiece doesn't require multiple sessions.

1. Add the script

Drop in one line. That's it. SidePiece auto-initializes and detects your nav links.

<!-- Add before </body> -->
<script src="https://sidepiece.vagibond.com/sidepiece-core.js"></script>

2. That's literally it

SidePiece automatically:

• Finds your .nav-menu, .nav-links, or .nav-tabs
• Extracts all <a> tags and mirrors them to the drawer
• Injects a hamburger button into your nav
• Shows the hamburger at 768px viewport width
• Hides your original nav on mobile

Basic Embed

For most sites, the zero-config approach works perfectly. Just add the script.

<!-- Your existing nav -->
<nav class="nav">
  <a href="/" class="nav-brand">My Site</a>
  <div class="nav-links">
    <a href="/features">Features</a>
    <a href="/pricing">Pricing</a>
    <a href="/contact">Contact</a>
  </div>
</nav>

<!-- SidePiece does the rest -->
<script src="https://sidepiece.vagibond.com/sidepiece-core.js"></script>

Configuration

Override defaults by calling SidePiece.init() with options.

<script src="https://sidepiece.vagibond.com/sidepiece-core.js"></script>
<script>
SidePiece.init({
  // Custom selector for nav detection
  selector: '.my-custom-nav',

  // Override detected links
  links: [
    { label: 'Home', href: '/' },
    { label: 'About', href: '/about' },
    { label: 'Contact', href: '/contact', className: 'cta' }
  ],

  // Custom breakpoint (default: 768)
  breakpoint: 900,

  // Custom top offset (default: 30)
  topOffset: 50,

  // Drawer width (default: 280)
  drawerWidth: 300
});
</script>

Configuration Options

Theming

Match your brand with the theme object.

SidePiece.init({
  theme: {
    background: '#1a1a2e',      // Drawer background
    text: '#ffffff',            // Primary text
    textMuted: 'rgba(255,255,255,0.7)', // Secondary text
    accent: '#e94560',          // CTA buttons
    overlay: 'rgba(0,0,0,0.5)', // Backdrop
    border: 'rgba(255,255,255,0.1)' // Borders
  }
});

JavaScript API

Control the drawer programmatically.

// Initialize with config
SidePiece.init(config);

// Open the drawer
SidePiece.open();

// Close the drawer
SidePiece.close();

// Toggle open/closed
SidePiece.toggle();

// Check if open
if (SidePiece.isOpen()) {
  console.log('Drawer is open');
}

// Remove all injected elements
SidePiece.destroy();

Link Detection

SidePiece scans for these selectors in order:

1. .nav-menu
2. .nav-links
3. .nav-tabs

It extracts all <a> tags with href attributes. Links with className containing "cta" render as buttons.

CSS Override

All styles use the .sidepiece- prefix. Override with higher specificity:

/* Custom hamburger color */
.sidepiece-btn span {
  background: #ff6b6b !important;
}

/* Custom drawer background */
.sidepiece-drawer {
  background: linear-gradient(135deg, #1a1a2e, #2d2d5a) !important;
}

/* Custom link hover */
.sidepiece-drawer a:hover {
  color: #ff6b6b !important;
}

Accessibility

SidePiece includes built-in accessibility features:

• aria-label="Open menu" on hamburger button
• Escape key closes the drawer
• overflow: hidden on body prevents background scroll
• Click-outside (overlay) closes the drawer

Changelog

Support

Having trouble with SidePiece? Unlike my marriage counselor, we're here to help.

• FUQs: FUQbuddy Portal
• Slack: #sidepiece-support
• Email: Contact Support