Navbar & Footer — Sourcey

The navbar and footer display links to external resources (GitHub, npm, social accounts) and an optional call-to-action button.

NavbarLink

interface NavbarLink {
  type: LinkType;
  href: string;
  label?: string;
}

Link types

Each type renders with its corresponding icon. The label field is optional and provides accessible text.

Type	Icon	Example
`"github"`	GitHub	`{ type: "github", href: "https://github.com/org/repo" }`
`"npm"`	npm	`{ type: "npm", href: "https://npmjs.com/package/name" }`
`"twitter"`	X/Twitter	`{ type: "twitter", href: "https://x.com/handle" }`
`"discord"`	Discord	`{ type: "discord", href: "https://discord.gg/invite" }`
`"linkedin"`	LinkedIn	`{ type: "linkedin", href: "https://linkedin.com/company/org" }`
`"youtube"`	YouTube	`{ type: "youtube", href: "https://youtube.com/@channel" }`
`"slack"`	Slack	`{ type: "slack", href: "https://workspace.slack.com" }`
`"mastodon"`	Mastodon	`{ type: "mastodon", href: "https://mastodon.social/@user" }`
`"bluesky"`	Bluesky	`{ type: "bluesky", href: "https://bsky.app/profile/user" }`
`"reddit"`	Reddit	`{ type: "reddit", href: "https://reddit.com/r/sub" }`
`"link"`	Generic link	`{ type: "link", href: "https://example.com", label: "Blog" }`

Primary CTA button

The navbar supports a single primary button that appears prominently in the header:

navbar: {
  primary: {
    type: "button",
    label: "Get Started",
    href: "https://app.example.com",
  },
}

The footer uses the same NavbarLink type:

footer: {
  links: [
    { type: "github", href: "https://github.com/org/repo" },
    { type: "twitter", href: "https://x.com/handle" },
  ],
}

Full example

navbar: {
  links: [
    { type: "github", href: "https://github.com/sourcey/sourcey" },
    { type: "npm", href: "https://www.npmjs.com/package/sourcey" },
    { type: "discord", href: "https://discord.gg/sourcey" },
  ],
  primary: {
    type: "button",
    label: "Live Demo",
    href: "/cheesestore/",
  },
},
footer: {
  links: [
    { type: "github", href: "https://github.com/sourcey/sourcey" },
    { type: "twitter", href: "https://x.com/sourcey" },
  ],
},