Moxi Design System

# Navigation

# Top Navigation

The mx-top-nav component functions as a top navigation bar.

It provides the following slots:

  • header - This can be used to place an image, heading, etc. inside the component's internal <header> element.
  • avatar - This is a square container that may be used to show a profile picture. It is not shown in viewports narrower than 640px.

Depending on the available width, tabs overflow into a "More" menu provided by the Tabs component (if more than three items). At smaller widths, the "More" tab is replaced with the Top Navigation's own hamburger button.

Navigation items may function as links if each tab is given an href property.

MoxiHub John Smith MoxiHub John Smith
<!-- Many links and custom search attributes -->
<mx-top-nav
  :tabs.prop="[
    { label: 'Link', href: '#' },
    { label: 'Link 2', selected: true, href: '#' },
    { label: 'Link 3', href: '#' },
    { label: 'Link 4', href: '#' },
    { label: 'Link 5', href: '#' },
    { label: 'Link 6', href: '#' },
  ]"
  search-id="example-search"
  search-name="example-search"
  search-placeholder="Search MoxiWorks"
>
  <img src="~@source/assets/moxihub.png" alt="MoxiHub" slot="header" />
  <img
    src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50"
    alt="John Smith"
    slot="avatar"
  />
</mx-top-nav>
<!-- Only three links (no "More" menu), No search -->
<mx-top-nav
  :tabs.prop="[
    { label: 'First Link', href: '#', selected: true },
    { label: 'Second Link', href: '#' },
    { label: 'Third Link', href: '#' },
  ]"
  show-search="false"
>
  <img src="~@source/assets/moxihub.png" alt="MoxiHub" slot="header" />
  <img
    src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50"
    alt="John Smith"
    slot="avatar"
  />
</mx-top-nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

Use the menu slot to provide alternative menu markup that is only shown at smaller widths. This can be used to add additional items like "Log Out" for mobile device UIs.

MoxiHub John Smith

Account Name

Link Link 2 Link 3 Section 4.1 Section 4.2 Link 4
Log Out 
<mx-top-nav
  :tabs.prop="[
    { label: 'Link', href: '#' },
    { label: 'Link 2', selected: true, href: '#' },
    { label: 'Link 3', href: '#' },
    { label: 'Link 4', href: '#' },
  ]"
>
  <img src="~@source/assets/moxihub.png" alt="MoxiHub" slot="header" />
  <img
    src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50"
    alt="John Smith"
    slot="avatar"
  />
  <mx-menu slot="menu">
    <p role="heading">Account Name</p>
    <a href="#"><mx-menu-item>Link</mx-menu-item></a>
    <a href="#"><mx-menu-item>Link 2</mx-menu-item></a>
    <a href="#"><mx-menu-item>
      Link 3
      <mx-menu-accordion slot="accordion">
        <a href="#"><mx-menu-item>Section 4.1</mx-menu-item></a>
        <a href="#"><mx-menu-item>Section 4.2</mx-menu-item></a>
      </mx-menu-accordion>
    </mx-menu-item></a>
    <a href="#"><mx-menu-item>Link 4</mx-menu-item></a>
    <hr>
    <a href="#">
      <mx-menu-item>
        Log Out
        <i slot="right" class="text-2 text-link ph-bold ph-power"></i>
      </mx-menu-item>
    </a>
  </mx-menu>
</mx-top-nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

Navigation items may also function as traditional tabs. Use the selectedTabIndex prop and mxChange event to handle the selected tab state. See Tabs.

MoxiHub John Smith
<mx-top-nav
  :tabs.prop="[
    { label: 'Tab' },
    { label: 'Tab 2' },
    { label: 'Tab 3' },
    { label: 'Tab 4' }
  ]"
  :selected-tab-index="activeTab"
  @mxChange="e => activeTab = e.detail"
>
  <img src="~@source/assets/moxihub.png" alt="MoxiHub" slot="header" />
  <img
    src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50"
    alt="John Smith"
    slot="avatar"
  />
</mx-top-nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# mx-top-nav

# Properties

Property Attribute Description Type Default
searchForm search-form The form attribute for the search input string undefined
searchId search-id The id attribute for the search input string undefined
searchLoading search-loading Set to true to show the search animation boolean false
searchName search-name The name attribute for the search input string undefined
searchPlaceholder search-placeholder The placeholder text for the search string 'Search'
searchValue search-value The value of the search input string undefined
selectedTabIndex selected-tab-index The index of the selected tab (if not setting an href for each tab) number null
showSearch show-search Set to false to hide the search boolean true
tabs -- An array of objects for each tab (see Tab Properties) IMxTabProps[] undefined

# Events

Event Description Type
mxChange Emits the newly selected tab's index as Event.detail CustomEvent<number>
mxSearch Emits the search value when the Enter key is pressed inside the search input. CustomEvent<string>

# Dependencies

# Depends on

# Graph

graph TD;
  mx-top-nav --> mx-tabs
  mx-tabs --> mx-select
  mx-tabs --> mx-tab
  mx-tabs --> mx-menu
  mx-tabs --> mx-menu-item
  mx-tab --> mx-badge
  mx-menu-item --> mx-checkbox
  style mx-top-nav fill:#f9f,stroke:#333,stroke-width:4px
1
2
3
4
5
6
7
8
9

If you are having trouble setting a prop or adding an event listener, refer to this page.

← Page Headers →