Bootstrap Navbar is not collapsing

1 Answer 401 Views

AppBar General Discussions Menu

Wreeecks asked on 30 Sep 2021, 05:59 AM

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>
         </>
    )
}

1 Answer, 1 is accepted

answered on 30 Sep 2021, 07:56 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Wreeecks

commented on 01 Oct 2021, 01:02 AM | edited

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

commented on 01 Oct 2021, 06:03 AM

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

commented on 03 Oct 2021, 10:19 PM

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

commented on 04 Oct 2021, 04:54 AM

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

Bootstrap Navbar is not collapsing

1 Answer, 1 is accepted