@designdaddy/navbar

v0.0.1

Published

11 days ago

Design Daddy navbar — logo image, links, social icons, menu, and optional CTA

0High
0Medium
0Low

datapro-rnd

react navbar header designdaddy

@designdaddy/navbar

Version 0.0.1 — first public release.

Modular React navbar: logo image, center links, teal social tiles, optional CTA, and a hamburger on tablet/phone. Toggle any section with show* props. Theme it with theme / className / style.

Peer dependency: React 17+ (18 / 19 supported).

Install

npm install @designdaddy/navbar

Import the component and the CSS (required — styles do not inject from the JS bundle):

import { Navbar } from "@designdaddy/navbar";
import "@designdaddy/navbar/styles.css";

Quick start

Put your logo in the app public folder (for example public/logo.png).

import { Navbar } from "@designdaddy/navbar";
import "@designdaddy/navbar/styles.css";

export default function App() {
  return (
    <Navbar
      logoSrc="/logo.png"
      logoAlt="Brand"
      logoHref="/"
      links={[
        { label: "About us", href: "/about", active: true },
        { label: "Services", href: "/services" },
        { label: "Infrastructure", href: "/infra" },
        { label: "Projects", href: "/projects" },
        { label: "Press", href: "/press" },
        { label: "Contact", href: "/contact" },
      ]}
      icons={[
        { name: "facebook", href: "https://facebook.com", label: "Facebook" },
        { name: "google", href: "https://google.com", label: "Google" },
        { name: "twitter", href: "https://twitter.com", label: "Twitter" },
        { name: "youtube", href: "https://youtube.com", label: "YouTube" },
        { name: "instagram", href: "https://instagram.com", label: "Instagram" },
        { name: "linkedin", href: "https://linkedin.com", label: "LinkedIn" },
      ]}
      theme={{
        primary: "#1aa3b0",
        text: "#4a6270",
        icon: "#3dbfd0",
      }}
    />
  );
}

Create React App

Do not install with "file:.../packages/navbar" (npm makes a junction → two copies of React → blank page).

From this package folder:

cd packages/navbar
npm run build
npm pack

In the CRA app:

npm install C:/Users/AarthiDatapro/Documents/Projects/Live/Web/designdaddy/packages/navbar/designdaddy-navbar-0.0.1.tgz

App.js:

import { Navbar } from "@designdaddy/navbar";
import "@designdaddy/navbar/styles.css";

After publish, switch the app to:

npm install @designdaddy/navbar

Logo (image only)

The logo is an image (or a custom mark). There is no built-in house icon and no brand text.

| Prop | Type | Description | |------|------|-------------| | logoSrc | string | Image URL (/logo.png, CDN, etc.) | | logoAlt | string | alt on the image | | logoHref | string | Link around the logo (default /) | | logoMark | node | Custom SVG/node instead of logoSrc | | logo | node | Replace the whole logo slot |

<Navbar logoSrc="/logo.png" logoAlt="Acme" logoHref="/" links={links} />

<Navbar logoMark={<MySvg />} links={links} />

Links

links is an array of items:

| Field | Type | Description | |-------|------|-------------| | label | string | Link text | | href | string | If set, renders <a> | | active | boolean | Underline + primary color | | onClick | function | Click handler | | id | string | Optional React key |

Without href, the item renders as a <button>.

links={[
  { label: "About us", href: "/about", active: true },
  { label: "Contact", onClick: () => openContact() },
]}

onNavigate={(item, event) => { ... }} on Navbar fires for every link (and closes the mobile drawer).

Icons

Social buttons are teal rounded squares with white glyphs.

Built-in name values:

facebook · google · twitter · x · youtube · instagram · linkedin · github · email · phone · search

| Field | Type | Description | |-------|------|-------------| | name | string | Built-in icon | | icon | node | Custom SVG (overrides name) | | href | string | Link | | label | string | aria-label / title | | onClick | function | Click handler |

icons={[
  { name: "instagram", href: "https://instagram.com", label: "Instagram" },
  { icon: <MySearch />, href: "/search", label: "Search" },
]}

Actions (CTA)

actions={[
  { label: "Get quote", href: "/quote" },
  { label: "Login", variant: "ghost", onClick: () => login() },
]}

| Field | Type | Description | |-------|------|-------------| | label | string | Button text | | href | string | Renders <a> | | variant | "primary" | "ghost" | First item defaults to primary | | onClick | function | Click handler |

Navbar props

Content

| Prop | Default | Description | |------|---------|-------------| | logoSrc / logoAlt / logoHref / logoMark / logo | — | Logo (image or custom) | | links | [] | Center nav items | | icons | [] | Social tiles | | actions | [] | CTA buttons | | sticky | false | Stick to the top of the viewport | | onNavigate | — | (item, event) when a link is used | | menuOpen | — | Controlled hamburger | | defaultMenuOpen | false | Uncontrolled initial open | | onMenuChange | — | (open: boolean) |

Layout & style

| Prop | Description | |------|-------------| | className | Extra class on .nbs-root | | style | Inline styles / CSS variables | | theme | Friendly tokens → --nbs-* variables |

Feature toggles

<Navbar
  logoSrc="/logo.png"
  links={links}
  icons={icons}
  showLinks={false}
  showIcons={false}
  showMenu={false}
  showShadow
/>

| Prop | Default | What it hides / shows | |------|---------|------------------------| | showLogo | true | Logo image | | showLinks | true | Center links | | showIcons | true | Social tiles | | showActions | true | CTA buttons | | showMenu | true | Hamburger (tablet / phone) | | showShadow | false | Drop shadow under the bar |

Responsive behavior

Layout follows bar width (@container on .nbs-root) and viewport.

| Width | What you see | |-------|----------------| | Desktop (~1100px+) | Logo left · links center · icon tiles right | | Tablet (≤1100px) | Logo left · icon tiles + hamburger right · links in the drawer | | Phone (≤720px) | Logo left · hamburger right · links and icons in the drawer |

The overlay does not grey out the header. Escape and the X close the drawer.

Styling

Import your CSS after the package CSS so overrides win.

import { Navbar } from "@designdaddy/navbar";
import "@designdaddy/navbar/styles.css";
import "./App.css";

A. `theme`

<Navbar
  logoSrc="/logo.png"
  links={links}
  theme={{
    primary: "#8fbd23",
    text: "#4a6270",
    surface: "#ffffff",
    icon: "#3dbfd0",
    iconOn: "#ffffff",
    iconHover: "#2aa9b8",
    fontFamily: "Georgia, serif",
    height: "5rem",
  }}
/>

Raw variables also work: theme={{ "--nbs-primary": "#c00" }}.

Theme tokens

| theme key | CSS variable | Controls | |-------------|--------------|----------| | primary | --nbs-primary | Active link, underline, hamburger | | primarySoft | --nbs-primary-soft | Soft fill | | text | --nbs-text | Link color | | muted | --nbs-muted | Muted labels | | surface | --nbs-surface | Bar and drawer background | | icon | --nbs-icon | Social tile background | | iconOn | --nbs-icon-on | Glyph color on the tile | | iconHover | --nbs-icon-hover | Tile hover background | | border | --nbs-border | Hairline / divider | | shadow | --nbs-shadow | Bar / drawer shadow | | overlay | --nbs-overlay | Drawer backdrop | | fontFamily | --nbs-font-family | Typeface | | fontSize | --nbs-font-size | Link size | | letterSpacing | --nbs-letter-spacing | Link tracking | | height | --nbs-height | Bar height | | maxWidth | --nbs-max-width | Inner max width | | radius | --nbs-radius | Bar corner radius | | gap | --nbs-gap | Space between links | | underlineHeight | --nbs-underline-height | Active underline |

B. Built-in class names

Scope overrides under your wrapper:

| Class | What it styles | |-------|----------------| | .nbs-root | Root + CSS variables | | .nbs-shell | Flex row: start / center / end | | .nbs-shell__start / __center / __end | Slots | | .nbs-logo / __mark | Logo image | | .nbs-links / __item / __link / .is-active | Nav links | | .nbs-icons / __link | Social tiles | | .nbs-actions / __btn / --primary / --ghost | CTA | | .nbs-menu / __bars / .is-open | Hamburger | | .nbs-overlay | Backdrop | | .nbs-drawer | Mobile / tablet panel |

.my-nav .nbs-links__link { letter-spacing: 0.2em; }
.my-nav .nbs-icons__link { border-radius: 6px; }

Compose yourself

import {
  NavbarShell,
  NavbarLogo,
  NavbarLinks,
  NavbarIcons,
} from "@designdaddy/navbar";
import "@designdaddy/navbar/styles.css";

<div className="nbs-root">
  <NavbarShell
    logo={<NavbarLogo src="/logo.png" alt="Brand" href="/" />}
    links={<NavbarLinks links={[{ label: "About", href: "/about" }]} />}
    icons={<NavbarIcons icons={[{ name: "instagram", href: "#" }]} />}
  />
</div>

Day to day: use Navbar. Use the pieces only for a custom layout.

Exports

import {
  Navbar,
  NavbarShell,
  NavbarLogo,
  NavbarLinks,
  NavbarIcons,
  NavbarMenu,
  NavbarActions,
  ICON_NAMES,
  THEME_KEYS,
  themeToCssVars,
  resolveFeature,
} from "@designdaddy/navbar";

Most apps only need Navbar.

Local pack

Same pattern as datagrid / form:

cd packages/navbar
npm run build
npm pack

Then in a host app:

npm install /path/to/designdaddy-navbar-0.0.1.tgz

Publish to npm

Same steps as @designdaddy/datagrid:

npm login

From the package folder, build and publish public scoped package:

cd packages/navbar
npm run build
npm publish --access public

prepublishOnly already runs vite build. --access public is required the first time for @designdaddy/*.

Confirm:

npm view @designdaddy/navbar

In the real app:

npm install @designdaddy/navbar

Later versions: bump "version" in packages/navbar/package.json, then npm publish again (no --access needed after the first public publish).

Folder layout

packages/navbar/
  package.json
  README.md
  src/
    index.js
    Navbar/            # façade you usually import
    NavbarShell/
    NavbarLogo/        # image (or logoMark)
    NavbarLinks/
    NavbarIcons/
    NavbarMenu/
    NavbarActions/
    styles/navbar.css
    utils/

Notes for packaging

"exports" points at dist/ — npm run build runs before publish.
CSS is dist/styles.css, imported as @designdaddy/navbar/styles.css.
react / react-dom are peerDependencies.
Consumers pass logoSrc, links, and icons — no sample brand assets in the package.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@designdaddy/navbar

Table of contents

Install

Quick start

Create React App

Logo (image only)

Links

Icons

Actions (CTA)

Navbar props

Content

Layout & style

Feature toggles

Responsive behavior

Styling

A. theme

Theme tokens

B. Built-in class names

Compose yourself

Exports

Local pack

Publish to npm

Folder layout

Notes for packaging

A. `theme`