Expandable/Collapsable nav not working?

[TheGeekPharaoh]

I have the following simple navigation definition in my sidebar:

  <pf-page managed-sidebar>
    <template #skeleton
      ><pf-masthead managed-sidebar>
        <pf-masthead-main>
          <pf-masthead-toggle>
            <pf-page-toggle-button>
              <bars-icon />
            </pf-page-toggle-button>
          </pf-masthead-toggle>
          <router-link to="/test-page">
            <pf-masthead-brand>
              <h1>LOGO</h1>
            </pf-masthead-brand>
          </router-link>
        </pf-masthead-main>
        <pf-masthead-content>
          <pf-toolbar full-height>
            <pf-toolbar-content>
              <pf-toolbar-group align="end">
                <pf-toolbar-item>
                  <pf-button variant="secondary"> Action </pf-button>
                </pf-toolbar-item>
              </pf-toolbar-group>
            </pf-toolbar-content>
          </pf-toolbar>
        </pf-masthead-content>
      </pf-masthead>

      <pf-page-sidebar sidebar-open>
        <pf-nav>
          <pf-nav-list>
            <pf-nav-item to="/test-page"> Dashboard </pf-nav-item>
            <pf-nav-expandable title="Settings">
              <pf-nav-item to="/"> Profile </pf-nav-item>
              <pf-nav-item to="/"> Billing </pf-nav-item>
            </pf-nav-expandable>
            <pf-nav-item to="/"> Users </pf-nav-item></pf-nav-list
          >
        </pf-nav>
      </pf-page-sidebar>
    </template>
    <router-view />
  </pf-page>

The collapsable section for "Settings" renders as expected, however clicking on it does not expand the section to display the Profile/Billing links. Am I doing something incorrectly? This component is not well-documented.

[mtorromeo]

You either set the managed prop to let the component handle the expanded state internally, or you control it yourself via v-model:expanded.

<!-- this -->
<pf-nav-expandable title="Settings" managed>
  <pf-nav-item to="/"> Profile </pf-nav-item>
  <pf-nav-item to="/"> Billing </pf-nav-item>
</pf-nav-expandable>

<!-- or this -->
<pf-nav-expandable title="Settings" v-model:expanded="expanded">
  <pf-nav-item to="/"> Profile </pf-nav-item>
  <pf-nav-item to="/"> Billing </pf-nav-item>
</pf-nav-expandable>