# Navigation Block Style: Animated Underline on Hover

> Adds an "Underline on hover" style to the Navigation block, where a line slides in under menu links on hover and stays under the current page link.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: block-styles, navigation, menus
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/block-style-navigation-underline/

## Code

```php
add_action( 'init', function () {
    register_block_style( 'core/navigation', array(
        'name'         => 'wpide-underline',
        'label'        => 'Underline on hover',
        'inline_style' => '.wp-block-navigation.is-style-wpide-underline .wp-block-navigation-item__content{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .25s ease;}.wp-block-navigation.is-style-wpide-underline .wp-block-navigation-item__content:hover,.wp-block-navigation.is-style-wpide-underline .wp-block-navigation-item__content:focus-visible,.wp-block-navigation.is-style-wpide-underline .current-menu-item>.wp-block-navigation-item__content{background-size:100% 2px;}@media (prefers-reduced-motion:reduce){.wp-block-navigation.is-style-wpide-underline .wp-block-navigation-item__content{transition:none;}}',
    ) );
} );
```

## Notes

The slide animation is turned off for visitors who prefer reduced motion.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Navigation Block Style: Animated Underline on Hover" 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/