# App-Style Bottom Navigation Bar on Phones

> Adds a "Mobile bottom bar" menu location and shows that menu as a fixed bar of up to five links at the bottom of the screen on phones, like a mobile app.

- Type: PHP
- Runs: Run everywhere
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: mobile, navigation, menus
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-mobile-bottom-nav/

## Code

```php
// Screen width below which the bar shows (px).
$wpide_bottom_nav_breakpoint = 768;

add_action( 'after_setup_theme', function () {
    register_nav_menus( array( 'wpide-mobile-bottom' => 'Mobile bottom bar' ) );
}, 20 );

add_action( 'wp_footer', function () use ( $wpide_bottom_nav_breakpoint ) {
    if ( ! has_nav_menu( 'wpide-mobile-bottom' ) ) {
        return;
    }

    $bp = absint( $wpide_bottom_nav_breakpoint );

    echo '<style>.wpide-bottom-nav{display:none;}@media (max-width:' . esc_html( $bp - 1 ) . 'px){body{padding-bottom:calc(64px + env(safe-area-inset-bottom));}.wpide-bottom-nav{display:block;position:fixed;left:0;right:0;bottom:0;z-index:9990;background:#fff;border-top:1px solid rgba(0,0,0,.1);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 10px rgba(0,0,0,.06);}.wpide-bottom-nav ul{display:flex;margin:0;padding:0;list-style:none;}.wpide-bottom-nav li{flex:1;}.wpide-bottom-nav a{display:flex;align-items:center;justify-content:center;min-height:64px;padding:6px;font-size:13px;font-weight:600;text-align:center;text-decoration:none;color:#1d2327;}.wpide-bottom-nav .current-menu-item>a{color:#2271b1;box-shadow:inset 0 3px 0 #2271b1;}}</style>';

    wp_nav_menu( array(
        'theme_location'  => 'wpide-mobile-bottom',
        'container'       => 'nav',
        'container_class' => 'wpide-bottom-nav',
        'container_aria_label' => 'Quick links',
        'depth'           => 1,
        'fallback_cb'     => false,
    ) );
} );
```

## Notes

Create a short menu (3 to 5 items) in Appearance > Menus and assign it to "Mobile bottom bar". Works with classic themes; block themes can assign menus there too.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "App-Style Bottom Navigation Bar on Phones" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/