Bootstrap Navbar is not collapsing

[Wreeecks]

I'm currently using "@progress/kendo-theme-bootstrap": "^4.41.1" and i''m having some issue with the navbar.

The hamburger menu button doesn't work. It doesn't collapse the menu on mobile view.  What am I missing here? please see my code below.

On the side note, is there any plan to make the appbar component responsive? Also, I hope in the future the appbar component can be seamlessly integrated with react-router.

export default function NavMenu() {

    return (

        <>

            <nav className="navbar navbar-expand-md">

                <div className="container">

                    <NavLink to="/" exact className='navbar-brand'>

                        <img src={Logo} alt="Logo" />

                    </NavLink>

                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">

                        <span className="icon-menu"></span>

                    </button>

                    <div className="collapse navbar-collapse" id="navbarSupportedContent">

                        <ul className="navbar-nav me-auto mb-2 mb-lg-0">

                            <MenuLinkItem to={'/home'} label='Home' icon='icon-dashboard' />

                            <MenuLinkItem to={'/users'} label='Users' icon='icon-user' />

                        </ul>

                        <NavLink to="/account"> Username</NavLink>

                        <NavLink to="/login" exact className='k-button k-flat' >Sign out</NavLink>

                    </div>

                </div>

            </nav>

         </>

    )

}

[Stefan]

Hello,

The @progress/kendo-theme-bootstrap package is responsible for the styles of the KendoReact components only. The provided code seems to be using standard DOM elements and Bootstrap components:

https://getbootstrap.com/docs/4.0/components/navbar/

If there is an issue with the Bootstrap styles, please contact the Bootstrap team as they are the ones developing and creating these styles and components.

If there is an issue with the KendoReact components using this theme, please share an example and I will be happy to take a look.

Regards,
Stefan
Progress Telerik

[Wreeecks]

Hi Stefan,

Thanks for your reply.

I think I've misunderstood what "kendo-theme-bootstrap" is. I thought it's a bootstrap bundle that includes its JS libs. It turns out that it's purely for styling or a custom kendo SCSS on top of bootstrap. 

So with this, I have to use another package like react-bootstrap in order to implement bootstrap functionality. The out of the box kendo-react-ui  doesn't have bootstrap components for react. Is that correct?

 

 

 

[Stefan]

Hello,

KendoReact as a library has over 100 React components any of which can be styled following the Bootstrap guidanes. Each component can be demoed with the Bootstrap theme:

[Wreeecks]

I understand that theme can be customised, however it doesn't mean that using a theme, let's say bootstrap, will automatically make the theme's component and its functionality available.

For example, Bootstrap's navbar is not available in kendo. Kendo have it's own AppBar that looks similar to bootstrap navbar, except that it lacks the responsive capability.

https://www.telerik.com/kendo-react-ui/components/layout/appbar/

https://getbootstrap.com/docs/5.0/components/navbar/

I was wrong to assume that kendo-bootstrap has the same functionality as bootstrap.

[Stefan]

Yes, this is correct. Using the KendoReact theme will not automatically include all Bootstrap components. The theme is used to style the KendoReact components to match the Bootstrap guide lines.

The Bootstrap components and the KendoReact component are two different sets of components, that both follow the Bootstrap style guide.