Neiki's Social Bar

Basic usage

<neiki-social-bar
  facebook="https://facebook.com/example"
  x="https://x.com/example"
  instagram="https://instagram.com/example"
  github="https://github.com/example"
  email="[email protected]"
></neiki-social-bar>

Themes

Each theme is a genuinely different look, not just a recolored copy. Dark and minimal default to monochrome icons for a cleaner, uniform silhouette; light, glass and auto keep full-color brand chips.

light — brand chips

dark — monochrome

glass — frosted, brand chips

minimal — flat, no chips

auto (follows OS)

Shapes

square

rounded

pill

circle

Sizes

small

medium

large

Display modes

icons

labels

icons-labels

Color modes

brand

monochrome

custom (neiki-social-bar variable override)

Orientation

horizontal

vertical

Collapsible mode

<neiki-social-bar collapsible collapsed label="Follow us" ...></neiki-social-bar>

Declarative config

JavaScript configuration

document.querySelector('#js-config-bar').setConfig({
  theme: 'auto',
  shape: 'rounded',
  size: 'medium',
  links: {
    github: 'https://github.com/neikiri',
    website: 'https://example.com'
  }
});

Custom / arbitrary links

bar.addLink('mastodon', 'https://mastodon.social/@example', {
  label: 'Mastodon',
  icon: 'simple-icons:mastodon',
  color: '#6364FF'
});

Methods playground

Event log

Multiple instances

Each instance manages its own state independently — the Iconify loader script and Custom Element are only registered once.

CDN-style usage

<script src="https://cdn.neikiri.dev/neiki-social-bar/neiki-social-bar.min.js"></script>

<neiki-social-bar github="https://github.com/neikiri"></neiki-social-bar>

Floating / top / bottom positions

Scroll the page — these bars are fixed to the viewport.