menu-system v0.1.3

menu-system

Powerful and simple tool to build a complex menu tree.

Usage

Construct menu:

// Create builder
const builder = createMenuBuilder(options?: MenuConfig)

// Create tree
const tree = builder.tree(({ route, arg }) => ({
  home: route(),
  users: route({
    children: {
      id: arg({
        children: {
          comments: route()
        }
      })
    }
  })
}))

// Build tree
const menu = builder.build(tree)

Use it anywhere:

menu.routes.home._.fullpath() // '/home'
menu.routes.users.id._.fullpath({ id: '1' }) // '/users/1'
menu.routes.users.id.comments._.fullpath({ id: 'mc-petry' }) // '/users/mc-petry/comments'

Configuration

interface MenuConfig {
  /**
   * Global routes prefix.
   * @default '/'
   */
  basePath?: string

  /**
   * Use trailing slash on routes
   * @default false
   */
  trailingSlash?: boolean
}

Helpers

/**
 * Returns route that match specified location.
 * Otherwise returns null
 */
menu.findRoute(location: string, maxLevel?: number): Route | null

Routes meta

const menu = builder.build(
  builder.tree(({ route }) => ({
    home: route({
      meta: {
        hidden: true
      }
    }),
    about: route({
      meta: {
        hidden: false
      }
    })
  }))
)

// Example usage
menu.routes._.children.filter(route => !route.meta.hidden)

Split trees

const homeTree = builder.tree(...)
const usersTree = builder.tree(...)

const menu = builder.build({
  ...homeTree,
  ...usersTree
})

Compatibility

All modern environments.\ IE 11 requires polyfills: String.startsWith()

Development

Publishing

npm run build\ npm publish dist