Building a News Site - Navigation

News Site - Navigation#

In this lesson, you are going to build the page navigation component using shadcn/ui NavigationMenu and Separator components.

Start by installing the NavigationMenu and Separator using shadcn/ui CLI.

Run this command in your favorite terminal:

xxxxxxxxxx

npx shadcn-ui@latest add navigation-menu separator

Categories Data#

The API you are going to fetch articles from is called newsapi.org, and it has a list of categories you can use.

Create a new components/categories.tsx file, and declare a new array with the categories labels and icons.

As mentioned before, you will use lucide.dev icons. Lucide packages are installed with the template you've used to create your app.

Add the following icon imports to your file:

xxxxxxxxxx

import { Banknote, BikeIcon, CpuIcon, FlaskConical, TvIcon } from "lucide-react"

Then, create the categories array:

xxxxxxxxxx

const categories = [

  { label: "business", icon: Banknote },

  { label: "entertainment", icon: TvIcon },

  { label: "science", icon: FlaskConical },

  { label: "sports", icon: BikeIcon },

  { label: "technology", icon: CpuIcon },

]

The categories array is your data model for the categories component.

Rendering Categories#

Import shadcn/ui NavigationMenu component, and create a Categories component:

xxxxxxxxxx

import {

  NavigationMenu,

  NavigationMenuItem,

  NavigationMenuLink,

  NavigationMenuList,

  navigationMenuTriggerStyle,

} from "./ui/navigation-menu"

xxxxxxxxxx

export const Categories = () => {

  return (

    <NavigationMenu>

      <NavigationMenuList>

        {categories.map((category, index) => (

          <NavigationMenuItem key={category.label}>

            <div>

              {<category.icon className="h-4 w-4" />}

              <span className="text-sm">{category.label}</span>

            </div>

          </NavigationMenuItem>

        ))}

      </NavigationMenuList>

    </NavigationMenu>

What's going on here?

1. You have used the NavigationMenu and the NavigationMenuList components to wrap the menu items.

2. Then, you've mapped through the categories and rendered a NavigationMenuItem for each.

3. Inside the NavigationMenuItem, you've rendered the icon and label of the category.

Now you'd want to see it live. Go back to the header file and render the categories component after the H1 tag like this:

xxxxxxxxxx

import { Categories } from "./categories-step4"

xxxxxxxxxx

export function SiteHeader() {

  return (

    <header className="border-b px-8 pb-4 pt-8">

      <H1 className="uppercase text-orange-700 lg:text-6xl">

        <Link href="/">{siteConfig.name}.</Link>

      </H1>

      <Categories />

    </header>

  )

}

Try navigate to the app, and you should see this error:

The NavigationMenu component uses react context inside of it, and you can only use createContext inside a client component (versus a server-side component).

To make the categories component client-side only, add this line at the file top:

xxxxxxxxxx

"use client";

Now go back to the site and the header should look like this:

You've made good progress!

Category Button Design#