Navigation

Let's explore a subset of the app's navigation.

<App
  name="XMLUI Invoice"
  layout="vertical"
>
  <AppHeader>
    <H1>XMLUI Invoice</H1>
  </AppHeader>
  <NavPanel>
    <NavLink label="Dashboard" to="/" />
    <NavLink label="Invoices" to="/invoices" />
  </NavPanel>

  <Pages>
    <Page url="/">
      <Dashboard />
    </Page>
    <Page url="/invoices">
      <Invoices />
    </Page>

  </Pages>

<Footer>Built with XMLUI <ToneSwitch /> </Footer>

</App>

<Component name="Dashboard">
  This is Dashboard.
</Component>

<Component name="Invoices">
  This is Invoices.
</Component>

vertical layout

<App
  name="XMLUI Invoice"
  layout="vertical"
>
  <AppHeader>
    <H1>XMLUI Invoice</H1>
  </AppHeader>
  <NavPanel>
    <NavLink label="Dashboard" to="/" />
    <NavLink label="Invoices" to="/invoices" />
  </NavPanel>

  <Pages>
    <Page url="/">
      <Dashboard />
    </Page>
    <Page url="/invoices">
      <Invoices />
    </Page>

  </Pages>

<Footer>Built with XMLUI <ToneSwitch /> </Footer>

</App>

<Component name="Dashboard">
  This is Dashboard.
</Component>

<Component name="Invoices">
  This is Invoices.
</Component>

Horizontal

We've seen vertical, here's horizontal.

<App
  name="XMLUI Invoice"
  layout="horizontal"
>
  <AppHeader>
    <H1>XMLUI Invoice</H1>
  </AppHeader>
  <NavPanel>
    <NavLink label="Dashboard" to="/" />
    <NavLink label="Invoices" to="/invoices" />
  </NavPanel>

  <Pages>
    <Page url="/">
      <Dashboard />
    </Page>
    <Page url="/invoices">
      <Invoices />
    </Page>

  </Pages>

<Footer>Built with XMLUI <ToneSwitch /> </Footer>

</App>

horizontal layout

<App
  name="XMLUI Invoice"
  layout="horizontal"
>
  <AppHeader>
    <H1>XMLUI Invoice</H1>
  </AppHeader>
  <NavPanel>
    <NavLink label="Dashboard" to="/" />
    <NavLink label="Invoices" to="/invoices" />
  </NavPanel>

  <Pages>
    <Page url="/">
      <Dashboard />
    </Page>
    <Page url="/invoices">
      <Invoices />
    </Page>

  </Pages>

<Footer>Built with XMLUI <ToneSwitch /> </Footer>

</App>