https://github.com/prosellen/astro-navigation

Create navigations for Astro site builder projects
https://github.com/prosellen/astro-navigation

Last synced: 3 months ago
JSON representation

Create navigations for Astro site builder projects

• Host: GitHub
• URL: https://github.com/prosellen/astro-navigation
• Owner: prosellen
• License: mit
• Created: 2022-10-25T20:16:29.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-25T20:40:22.000Z (6 months ago)
• Last Synced: 2024-09-27T13:41:04.577Z (4 months ago)
• Language: TypeScript
• Size: 2.19 MB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Custom navigation for Astro pages

This component helps you create a navigation tree structure based on an array of JSON objects you provide. This gives you full control and flexibility over what the tree looks like.

## Work In Progress

While this component mostly works, it is still in beta and should not be considered "production ready". Future version might include breaking changes.

I'm honestly just working on a solution to fit my very specific needs and mistakenly used the `astro-component` keyword ... which got it listed in the Astro Integration pages and gave this more attention than it deserves right now. But now that it's here, it might actually be of some use to other people as well.

## Basic usage

First install the module:

```js

npm install @prosellen/astro-navigation

```

Then inside of an `.astro` page, import the module, create an array of navigation objects, and pass it to the component inside of the body:

```js

---

import Navigation from '@prosellen/astro-navigation'

// Create an array with (nested) navigation objects

const navigationItems = [

  { url: "/", text: "Home" },

  {

    url: "/about-us/",

    text: "About Us",

    children: [

      {

        url: "/about-us/team/",

        text: "Team",

      },

    ],

  },

  { url: "/contact/", text: "Contact" },

]

---

  

```

This will render to something like this:

```html



  


    Home

  

  


    About Us

    


      


        Team

      

    

  

  


    Contact

  



```


## Usage options

### Navigation Item array

```js

const navigationItems = [

  {

    text: "Home", // The text to display inside the `a` tag

    url: "/about-us/", // A unique URL to the page to be used as the `href` attribute

    redirect: "/about-us/team/", // (Optional) If set, this is used for the `href` attribute instead of the URL

    children: [{ ... }], // (Optional) An array of navigation items for nested navigation

  },

  ...

]

```

### Component

```js

```

See the [demo pages](./demo/src/pages/) in the repository for usage examples