This Package makes it easy for you to create a responsive web app by handling the navigation bar for you, There's a tonne of customization options, and we'll continue to support improvements and more features. img1

desktop nav_bar


mobile nav_bar


mobile drawer menu (full mode)


Find an example for package usage inside the /example folder.

import 'package:flutter/material.dart';
import 'package:ruki_nav_bar/ruki_nav_bar.dart';
void main() {
  runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Demo',
        debugShowCheckedModeBanner: false,
        home: LayoutBuilder(
          builder: (_,constraints){
            return SiteNavBar.get(
                body: Container(
                  color: Colors.grey[100],
                indicatorLineThickness: 4,
                drawerMode: NavDrawerMode.full,
                pageIndicator: PageIndicator.outlined,
                itemPosition: NavItemPosition.right,
                drawerHeader: Container(),
                drawerFooter: Container(height: 50,color: Colors.grey[200],),
                leading: const Text("Logo",style: TextStyle(color:,fontSize: 30),),
                navItemSpacing: 8,
                navItems: [
                  NavItem(relativeIndex: 0, label: "Home", activeColor:, onTap: (){}),
                  NavItem(relativeIndex: 1, label: "About us",activeColor:, onTap: (){}),
                  NavItem(relativeIndex: 2, label: "Contact us",activeColor:, onTap: (){}),

API Reference

Name Object-type
type DeviceType
height double
title Widget
itemsPosition NavItemPosition
enableDrawer bool
titleText String
backgroundColor Color
leading Widget
items List
actions List
fab Widget
showFab bool
navItemSpacing double
pageIndicator double
indicatorLineThickness double
customDecoration ShapeDecoration
drawerHeader Widget
drawerBody Widget
drawerFooter Widget