Navigation Bar - PIWEEK/polymux GitHub Wiki

Navigation bar

To create a navigation bar you should just add the following code

<polymux-navigation-bar distribution="space-between"></polymux-navigation-bar>

Warning: A navigation bar does not work itself if it does not have any tab childs. Styling navigation bar By default will create a grid depending on the number of siblings. A Polymux navigation bar accepts one attributes:

  • distribution:
    • flex-start: Align items to the left
    • space-between: Create a auto grid default
    • flex-end: align items to the right

Tabs

A navigation bar child component to create links to areas of the web. To add tabs to your navigation bar just should add a <polymux-tab></polymux-tab> child of the navigation bar.

<polymux-navigation-bar distribution="space-between">
  <nav>
      <polymux-tab tab-name="Discover"></polymux-tab>
      <polymux-tab tab-name="Projects" link="index.html"></polymux-tab>
      <polymux-tab tab-name="Profile" link="index.html"></polymux-tab>
  </nav>
</polymux-navigation-bar>

A Polymux tab accepts two attributes:

  • tab-name: The name and the title of the link
  • link: Where it links. default: index.html

Notifying elements

Some elements can accept notifications from a tab

Notifying the polimux-dialog component

<polymux-tab tab-name="Discover" notify="polymux-dialog" notify-message="This is an amazing dialog from a tab"></polymux-tab>
  • notify: The component it notifies to. Some elements accept a notification like the polymux-dialog components
  • notify-message optional: An optional notification message that might be used by the component.

Example

An simple navigation bar

<polymux-navigation-bar distribution="space-between"></polymux-navigation-bar>
  <nav>
    <polymux-tab tab-name="Home" link="index.html"></polymux-tab>
    <polymux-tab tab-name="Polymux" link="index.html"></polymux-tab>
  </nav>
</polymux-navigation-bar>

An example navigation bar including a polymux-logo component and a polymux-dialog notification

<polymux-navigation-bar distribution="space-between"></polymux-navigation-bar>
  <polymux-logo project-name="polymux" image-url="image.svg"></polymux-logo>
  <nav>
    <polymux-tab tab-name="Dialog" notify="polymux-dialog" notify-message="This is an amazing dialog from a tab"></polymux-tab>
    <polymux-tab tab-name="Home" link="index.html"></polymux-tab>
    <polymux-tab tab-name="Polymux" link="index.html"></polymux-tab>
  </nav>
</polymux-navigation-bar>
⚠️ **GitHub.com Fallback** ⚠️