Update navigation bar with Hashnode's headless CMS

This article assumes that the reader has built a custom homepage with Hashnode's headless CMS started kit. Here is the article if you are interested in creating your own!

Hashnode's navigation bar is usually hidden on wider screen viewports. It is only displayed on smaller screens like phones and tablets (or a netbook if you still use one of those :D)

Setup

1. (Optional) Navigate to packages/blog-starter-kit/themes/hashnode/components/publication-sidebar-nav-links.tsx and update the label (in our case, I have changed it to "About me")

    <nav className="pb-8">
          <PublicationSidebarNavLinkItem
            href="/"
            label="About me"
            isActive={!!isHomePage}
          />
    ...
   

2. Navigate to packages/blog-starter-kit/themes/hashnode/components/publication-sidebar.tsx and update the navBarItems with the entries that you would like to display.

   Note: Do not forget to spread the existing navbar items. Not doing this can cause for some headaches in the future.

     const { enabledPages } = publication.preferences;
     const navbarItems = [
       // Add your entry here
       { id: 'blog', label: 'Blog', url: '/blogs', isActive: !currentActiveMenuItemId && isHome, type: PublicationNavigationType.Page },
       ...publication.preferences.navbarItems,
     ];
   

3. If you reduce the viewport of your page or go to a mobile view, you can now see the navbar with your updated entries!