USWDS-Vue

# Side Navigation

Example of a simple menu.
Current Page:
  • Page 1
  • Page 2
  • Page 3
  • Page 4
  • Page 5
Example of a menu 2 levels deep.
Current Page:
  • Page 1
    • Child Page A
    • Child Page B
    • Child Page C
  • Page 2
    • Child Page A
    • Child Page B
    • Child Page C
  • Page 3
    • Example of a menu 3 levels deep.
    Current Page:
    • Page 1
      • Child Page A
      • Child Page B
      • Child Page C
  • Page 2
    • Child Page A
    • Child Page B
      • Grand Child I
      • Grand Child II 
    <div class="mt-3 mb-3">
    <us-side-nav :links="menu"/>
</div>

<script>

export default {
    data() {
        return {
            selected: {},

            menu3: [
                {name: 'Page 1', active: true, children: [
                    {name: 'Child Page A'},
                ]},
                {name: 'Page 2', children: [
                    {name: 'Child Page A'},
                    {name: 'Child Page C', children: [
                        {name: 'Grand Child I'},
                        {name: 'Grand Child II'},
                        {name: 'Grand Child III'}
                    ]}
                ]}
            ],

        };
    }
}
</script>
    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

    # Icons

    Icons are supported using font-awesome (opens new window), simply pass in the icon class you want in a icon field in your menu defintion. See this example;

    <us-side-nav :links="[
    {name: 'Page 1', icon: 'fal fa-database'},
    {name: 'Page 2', active: true, icon: 'far fa-file-alt'},
    {name: 'Page 3', icon: 'fal fa-users'},
]"/>
    1
    2
    3
    4
    5

    # Routing

    Support for dynamic routing using <vue-router> is built in. Simply add a to field to the menu item and set to whatever value you would pass to a <router-link> tag. That is, this behaves just like other links in the uswds-vue framework.

    You can also use a href for external pages.

    Alternatively, the v-model is bound to the currently selected page, and returns the page object given in your menu definition.

    menu: [
    {name: 'Page 1', active: true, to: {name: 'page-1'},
    {name: 'Page 2', active: true, href: 'https://va.gov'},
    {name: 'Page 3', active: true, to: {name: 'page-3'},
],
    1
    2
    3
    4
    5

    # Properties

    Inherited for all form inputs;

    Property Type Default Description
    v-model object null Emits the currently selected page
    links array null Array of pages, with a name, to, chilren, href and active fields, see example above.

    ← Header Navigation →