Bar

A top or bottom app bar for headers and footers, with optional sticky positioning.

import { ... } from '@corndev/ui'

MyApp

HTML

No JavaScript required — these classes are the whole component.

<header class="corn-bar" data-position="top" data-sticky>Site title</header>

Classes

Class
`.corn-bar`

Attributes

Attribute	Values
`data-position`	`top\|bottom`
`data-sticky`	`present or absent`

Vanilla JS

Optional. createBar only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createBar } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createBar(el, { /* options */ });

Options

Option	Type	Default
`position`	`'top'\|'bottom'`	`'top'`
`sticky`	`boolean`	`false`

React

Bar, Header, Footer — from @corndev/ui-react.

The props are the same as the options above, plus className.

Top bar (default)

import { Bar } from '@corndev/ui-react';
import '@corndev/ui/theme';

<Bar>
  <Stack direction="horizontal" gap="sm">
    <Button>Home</Button>
    <Button level="ghost">About</Button>
  </Stack>
</Bar>

Bottom bar

<Bar position="bottom">
  © 2025 Corndog
</Bar>

Sticky

<Bar sticky>...</Bar>

Convenience aliases

Header and Footer are thin wrappers that pre-set position:

import { Header, Footer } from '@corndev/ui-react';

<Header sticky>...</Header>
<Footer>...</Footer>