@dnagtx/dna-gtx-navbar

v1.0.5

Published

14 days ago

DNA GTx site navbar as a reusable React component.

0High
0Medium
0Low

dnagtx

navbar react dna-gtx

dna-gtx-navbar

Two DNA GTx navbar components: Navbar for the public marketing site, and DashboardNavbar for logged-in app pages. Logo and layout are fixed in both; only links/buttons are configurable.

Requires React 16.8+ (no other dependencies). Both are responsive: below 1024px wide, spacing tightens up. Below 768px:

Navbar collapses its links behind a hamburger that opens a small dropdown below the bar (logo and login/avatar stay visible).
DashboardNavbar collapses everything — tabs and the profile hamburger — behind a hamburger at the far right that opens a full-height drawer sliding in from the right, showing the user's name/avatar at the top, then the tabs, then the avatarMenu items.

Your page's <html><head> must include <meta name="viewport" content="width=device-width, initial-scale=1"> — without it, mobile browsers render at a fake ~980px desktop width and the breakpoints never trigger. Most app scaffolds (CRA, Vite, Next.js) already include this by default.

Install

This package isn't on the public npm registry — install it straight from the GitHub repo:

npm install git+https://github.com/DNA-GTx/dna-gtx-navbar.git

Colleagues with repo access can run the same command. To pick up later updates, they just re-run it or npm update @dnagtx/dna-gtx-navbar.

`Navbar` — public site navbar

Floating translucent glass pill, meant to sit over a hero image.

import Navbar from '@dnagtx/dna-gtx-navbar';

function App() {
  return (
    <Navbar
      links={[
        { label: 'About us', href: '/about' },
        { label: 'FAQ', href: '/faq' },
        { label: 'Our team', href: '/team' }
      ]}
      loginLabel="Login"
      onLoginClick={() => console.log('login clicked')}
    />
  );
}

links accepts any number of items — add, remove, or reorder as needed. Each item can navigate via href, run custom logic via onClick, or both:

<Navbar
  links={[
    { label: 'About us', onClick: () => setPage('about') },
    { label: 'FAQ', onClick: () => setPage('faq') },
    { label: 'Our team', onClick: () => setPage('team') },
    { label: 'Contact', onClick: () => setPage('contact') }
  ]}
/>

When isLoggedIn is true, the right-hand button swaps to a round avatar showing the first letter of userName, instead of the Login pill:

<Navbar
  isLoggedIn={user !== null}
  loginLabel="Login"
  onLoginClick={() => setUser(fakeLogin())}
  userName={user?.name}
  onLoggedInClick={() => setUser(null)}
/>

`Navbar` props

| Prop | Type | Default | Description | |-------------------|----------|-------------------------------------|---------------------------------------| | links | array | About us / FAQ / Our team | Any number of { label, href, onClick } items | | loginLabel | string | "Login" | Button text when logged out | | onLoginClick | function | undefined | Click handler when logged out | | isLoggedIn | boolean | false | Swaps the button to a round avatar | | userName | string | undefined | Avatar shows this name's first letter | | onLoggedInClick | function | undefined | Click handler when logged in | | onLogoClick | function | undefined | Logo click handler (e.g. navigate home) | | className | string | undefined | Extra class on the root <nav> |

The logo itself (image and alt text) is fixed and not configurable — only its click behavior is. If isLoggedIn is true but no userName is given, the button falls back to showing the text "Account" instead of an avatar letter.

`DashboardNavbar` — logged-in app navbar

Full-width bar for authenticated app pages: active tab gets a solid dark pill, inactive tabs are plain text, and the right side is a hamburger icon that opens the profile dropdown (no logged-out state — use this only once a user is signed in).

import { DashboardNavbar } from '@dnagtx/dna-gtx-navbar';

function AppLayout() {
  const [page, setPage] = useState('profile');

  return (
    <DashboardNavbar
      links={[
        { label: 'My Profile', active: page === 'profile', onClick: () => setPage('profile') },
        { label: 'My Reports', active: page === 'reports', onClick: () => setPage('reports') }
      ]}
      userName={user.name}
      avatarMenu={[
        { label: 'View profile', onClick: () => setPage('profile') },
        { label: 'Account settings', onClick: () => setPage('settings') },
        { label: 'Log out', onClick: () => logOut() }
      ]}
    />
  );
}

Clicking the hamburger icon opens a dropdown built from avatarMenu — any number of { label, href, onClick } items, same pattern as links. It closes automatically after picking an item or clicking anywhere outside it. Omit avatarMenu (or pass an empty array) and clicking it just fires onAvatarClick with no dropdown, as before. userName is still used to show the user's initial and full name in the mobile drawer header.

Any item in links can have its own dropdown too — a nested list of { label, href, onClick } items. A link with a dropdown renders as a button with a chevron instead of a plain link; clicking it opens a floating panel on desktop, or expands inline (indented) in the mobile drawer:

<DashboardNavbar
  links={[
    { label: 'My Profile', active: true },
    {
      label: 'Reports',
      dropdown: [
        { label: 'Weekly report', onClick: () => openReport('weekly') },
        { label: 'Monthly report', onClick: () => openReport('monthly') }
      ]
    }
  ]}
/>

`DashboardNavbar` props

| Prop | Type | Default | Description | |------------------|----------|------------------------------------|--------------------------------------------| | links | array | My Profile (active) / My Reports | Any number of { label, active, href, onClick, dropdown } items — dropdown is an optional nested array of { label, href, onClick } | | userName | string | undefined | Shown (with first-letter avatar) in the mobile drawer header | | avatarMenu | array | undefined | Any number of { label, href, onClick } dropdown items | | onAvatarClick | function | undefined | Click handler for the hamburger icon (fires alongside opening the dropdown, if any) | | onLogoClick | function | undefined | Logo click handler (e.g. navigate home) | | className | string | undefined | Extra class on the root <nav> |

Publishing updates (for maintainers)

git add -A
git commit -m "describe the change"
git push

Colleagues installing via the git URL pick up changes on their next npm install / npm update. No version bump or npm login required.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

dna-gtx-navbar

Install

Navbar — public site navbar

Navbar props

DashboardNavbar — logged-in app navbar

DashboardNavbar props

Publishing updates (for maintainers)

`Navbar` — public site navbar

`Navbar` props

`DashboardNavbar` — logged-in app navbar

`DashboardNavbar` props