Ionic Spilt Pane - Main content not using full width when using pure JavaScript

I’m creating a clickable prototype with Ionic and just using JavaScript without a framework (no Angular/React/Vue…similar to the sample code on the docs site).

I can get the split pane to show the side menu, but the main content is missing and it’s not using the full width (see image below).

Here’s the code I’m using.


<!DOCTYPE html>
<html lang="en" class="ios" mode="ios">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test App</title>
    <script type="module" src=""></script>
    <script nomodule src=""></script>
    <link rel="stylesheet" href="" />
    <link rel="stylesheet" href="styles.css" />>
    <script type="module">
        import { menuController } from '';
        window.menuController = menuController;

        <ion-split-pane when="md">

            <!--  side menu  -->
                    <ion-toolbar translucent>
                                <ion-icon name="home"></ion-icon>
                        <a href="/users.html">
                                <ion-icon name="people"></ion-icon>
                        <a href="/info.html">
                                <ion-icon name="information-circle"></ion-icon>

            <!-- main content -->
            <ion-router-outlet main>
                    <ion-buttons slot="start">




:root {
    --ion-safe-area-top: 20px;
    --ion-safe-area-bottom: 22px;

ion-menu ion-content ion-list a {
    text-decoration: none;

ion-menu ion-content ion-list a ion-item ion-label {
    margin-left: 10px;

@media only screen and (min-width: 768px) {
    ion-split-pane {
        --side-max-width: 200px;

There’s no sample code on the docs site so I’m not sure what I’m doing wrong.