Using ion-toolbar as a desktop nav, clipping dropdown menus

Hey devs!

I am building a web app using StencilJS (2.3) and Ionic (5.2.3). I want to build a desktop navigation bar. I am trying to use an ion-toolbar but the toolbar (I think?) is clipping my dropdown menus and other content.

I think this is the same issue but no one proposed a solution: How to make a bootstrap dropdown extend outside of ion-header / ion-toolbar?

An example of the dropdown being clipped or cut off in the toolbar/header

<ion-header>
    <ion-toolbar>
        <div slot="start">
            <div>
                <sl-dropdown hoist={ true }>
                    <sl-button slot="trigger" caret>Dropdown</sl-button>
                    <sl-menu>
                        <sl-menu-item>Dropdown Item 1</sl-menu-item>
                        <sl-menu-item>Dropdown Item 2</sl-menu-item>
                        <sl-menu-item>Dropdown Item 3</sl-menu-item>

                        <sl-menu-divider></sl-menu-divider>

                        <sl-menu-item checked>Checked</sl-menu-item>
                        <sl-menu-item disabled>Disabled</sl-menu-item>
                    </sl-menu>
                </sl-dropdown>
            </div>
        </div>
    </ion-toolbar>
</ion-header>

An alternate question could be: is this an appropriate method to creating a desktop nav? Should I not wrap my nav in a toolbar and place this somewhere else, only showing it on desktop?

Any advice would be appreciated!

1 post - 1 participant

Read full topic