https://neobrutalism.com/hi/blocks/sidebar/collapsible-dashboard-sidebar
कोलैप्सिबल साइडबार
साइडबार · Pro सोर्स
एप्लिकेशन साइडबार जो एक साथ तीन काम करता है: डेस्कटॉप पर पूरा 256px पैनल, सिमटने पर 64px आइकन रेल, और मोबाइल पर डिम्ड बैकड्रॉप वाला ऑफ़-कैनवास ड्रॉअर। इसमें ब्रांड रो, रोल बैज वाला प्रोफ़ाइल ब्लॉक, अनरीड काउंट वाले छह नेविगेशन एंट्री, और नीचे पिन log-out एक्शन है। सिमटने पर लेबल विज़ुअली छिपते हैं लेकिन स्क्रीन रीडर के लिए रहते हैं, इसलिए रेल कभी अनाम आइकन की रो नहीं बनती। हर रंग थीम टोकन है, इसलिए बिना एडिट लाइट और डार्क में आपके पैलेट को फ़ॉलो करता है।
साइडबार
कोलैप्सिबल साइडबारलाइव प्रीव्यू खोलें
- Hero, प्राइसिंग और auth
- हर ब्रेकपॉइंट का पूर्वावलोकन करें
- स्रोत की प्रतिलिपि बनाएँ
- MCP स्थापित करने के लिए तैयार
- Radix · Base UI · React Aria
- 158 तैयार-निर्मित ब्लॉक
- पृष्ठ के शिपिंग वाले खंड
- डैशबोर्ड और विपणन
- Pro कोड अनलॉक करता है
- ड्रॉप-इन लेआउट
पसंद डेवलपर्स, डिज़ाइनर्स
और क्रिएटर्स की
आपकी UI किट मिल गई और तुरंत ले ली। नई है, एक्टिवली मेंटेन होती है और लगातार बेहतर हो रही है — कमाल का काम! 🤘
Ziv Reich, सॉफ़्टवेयर डेवलपर बस इतना कहना था कि neobrutalism.com पर बढ़िया काम किया. सच में बहुत पसंद है. डिज़ाइन मुझसे होता नहीं, तो यह मेरे लिए कमाल की चीज़ रही. अपनी पर्सनल साइट पर इस्तेमाल किया.
Paul Bratslavsky, Coding With Paul के क्रिएटर आख़िरकार Neobrutalism.com से अपनी पर्सनल वेबसाइट फिर से बनाई — मज़ेदार लाइब्रेरी, शुरू करना बहुत आसान!
Cameron Blackwood, कंटेंट क्रिएटर Neobrutalism.com रेट्रो स्टाइल की मेरी पसंदीदा UI कंपोनेंट लाइब्रेरी में से एक है — कंपोनेंट जो सच में ship होते हैं।
Zhengyang Hou, इंडी हैकर वेब के लिए मेरी पसंदीदा ui लाइब्रेरी में से एक. बढ़िया काम — उम्मीद है यह और भी आगे जाएगी.
Taseen Tanvir, फ़ाउंडर और डिज़ाइनर Neobrutalism.com Pro आज़माया — बाक़ी से अलग UI किट, सच में ताज़गी भरी। नियोब्रूटलिज़्म ब्लॉक्स 🔥 से अजीब लेआउट का प्रोटोटाइप कहीं तेज़ हो गया।
Nitesh Padghan, घोस्टराइटर ब्यूटीफ़ुल लैंडिंग पेज डिज़ाइन, परफ़ेक्ट बैलेंस और फ्लो के साथ। कलर पैलेट और एनिमेशन मिलकर एक्सेप्शनल यूज़र एक्सपीरियंस बनाते हैं।
Alan Obeng-Peprah, Senior Designer @ NativeXAI उन्होंने जो डिज़ाइन डिलीवर किया, उससे मैं सच में इंप्रेस्ड हूँ। फ़ाइनल प्रॉडक्ट बिल्कुल वैसा ही था जैसा मैंने सोचा था।
Desmond, Co-founder @ VectorlabsVentures एजेंसी ओनर के तौर पर मैं क्लाइंट लैंडिंग लेआउट पर हफ़्ते लगा देता हूँ। Neobrutalism.com के साथ मैं टेम्प्लेट लगाता हूँ, कॉपी ट्वीक करता हूँ, और शिप के लिए तैयार।
Duke Opoku Amankwah, Founder @ Midas टेम्प्लेट सिर्फ़ विज़ुअली स्टनिंग नहीं — स्ट्रक्चर भी बहुत अच्छा है। हफ़्तों का डेवलपमेंट टाइम बचाया।
Abiola Braimah, Developer @ Studio IX आउटस्टैंडिंग क्वालिटी और डिटेल पर ध्यान। रिस्पॉन्सिव डिज़ाइन हर डिवाइस पर फ्लॉलेस काम करता है।
Acromond X., Co-founder @ VectorlabsVentures इन टेम्प्लेट को हमारे वर्कफ़्लो में जोड़ने से डेवलपमेंट साइकिल काफी कम हो गई। शानदार काम।
Raquib S., Backend Developer ये टेम्प्लेट हमारा गो-टू रिसोर्स बन गए हैं। कोड क्लीन है, अच्छी तरह डॉक्यूमेंटेड, और आसानी से कस्टमाइज़ हो जाता है।
Hallic M., Developer @ AtlasLabs Neobrutalism.com टेम्प्लेट एस्थेटिक्स और फ़ंक्शनैलिटी का परफ़ेक्ट बैलेंस रखते हैं। हमारे प्रोजेक्ट्स के लिए असली गेम-चेंजर।
Ibrahim S., Frontend Lead @ ScaleUp आउटस्टैंडिंग सपोर्ट और प्रीमियम क्वालिटी टेम्प्लेट। इन टेम्प्लेट पर ROI फ़ीनॉमिनल है।
Kevin K., CEO @ WebCraft Neobrutalism.com टेम्प्लेट ने नए क्लाइंट प्रोजेक्ट्स के अप्रोच को पूरी तरह बदल दिया। कोड क्वालिटी एक्सेप्शनल है और डिज़ाइन सच में वर्ल्ड-क्लास।
Danny G., Founder of DevStack मैंने कई टेम्प्लेट लाइब्रेरी इस्तेमाल की हैं, लेकिन Neobrutalism.com परफ़ॉर्मेंस ऑप्टिमाइज़ेशन और क्लीन कोड आर्किटेक्चर की वजह से अलग है।
Ian D., CTO at Wavelength इन टेम्प्लेट में एनिमेशन और माइक्रो-इंटरैक्शन बिल्कुल शानदार हैं। डिज़ाइन टीम के लिए बेस्ट इन्वेस्टमेंट।
Ben S., Lead Designer at PixelPerfect नॉन-टेक्निकल फ़ाउंडर के तौर पर Neobrutalism.com टेम्प्लेट ने डिज़ाइन क्वालिटी से समझौता किए बिना रिकॉर्ड समय में MVP लॉन्च करने में मदद की। हमारे इन्वेस्टर्स हैरान रह गए।
Matthew I., Startup Founder मुझे पसंद है कि ये कंपोनेंट कितने मॉड्यूलर और अच्छी तरह डॉक्यूमेंटेड हैं। अलग-अलग टेम्प्लेट के टुकड़े आसानी से मिला पाए।
Garrett P., Frontend Lead at TechFusion Neobrutalism.com टेम्प्लेट पर ROI अविश्वसनीय है। डेवलपमेंट टाइम बहुत कम हो गया और क्लाइंट्स को बेहतर क्वालिटी साइट्स मिल रही हैं।
Xavier C., Agency Owner
अक्सर पूछे
जाने वाले सवाल
कोलैप्सिबल साइडबार ब्लॉक को कैसे बनाया जाता है, आप क्या बदल सकते हैं, और इसे यहाँ अन्य लेआउट की जगह कब इस्तेमाल करें।
ऐप के लिए। यह signed-in यूज़र, current route, और पेज कंटेंट के चारों ओर persistent shell मानता है — इसलिए इसमें लोगो और sign-up बटन की बजाय प्रोफ़ाइल ब्लॉक और log-out एक्शन है। पब्लिक साइट के लिए navbar कैटेगरी इस्तेमाल करें: top-nav ब्लॉक हॉरिज़ॉन्टल हैं, अकाउंट स्टेट नहीं रखते, और शेल की बजाय हेडर के लिए बने हैं। यह इकलौता साइडबार ब्लॉक है, इसलिए तुलना के लिए कोई संकरा या चौड़ा संस्करण नहीं।
यह w-64 से w-16 हो जाती है और हर टेक्स्ट लेबल हटाए बिना sr-only बन जाता है, इसलिए आइकन के पास accessible नाम रहते हैं और हर रो hover tooltip के लिए title attribute रखती है। प्रोफ़ाइल अवतार रखता है और नाम व रोल visually hidden लाइन के पीछे छिपाता है। Notifications पर unread बैज 3 unread वाले hidden वाक्यांश से बदल जाता है, क्योंकि 64px रेल में सिमटा numeric बैज पढ़ने लायक नहीं रहता।
फ़ाइल के ऊपर activeHref constant बदलें, या Next.js ऐप में const activeHref = usePathname() से बदल दें। मैचिंग रो को page के रूप में aria-current मिलता है साथ में पीला फिल, ताकि स्टेट सिर्फ़ दिखाया नहीं, घोषित भी हो — सिर्फ़ रंग स्क्रीन रीडर और जो अंतर न देख पाएँ उनके लिए अदृश्य रहता। रो को visible बॉर्डर भी मिलता है — दूसरा non-colour संकेत।
सब navItems array से आता है: हर एंट्री id, लेबल, lucide आइकन कंपोनेंट, href, और optional count है। array रीऑर्डर करने से साइडबार रीऑर्डर होता है, और किसी एंट्री पर count जोड़ने से उस रो पर बैज रेंडर होता है। लगभग आठ एंट्री व्यावहारिक सीमा है इससे पहले लिस्ट को अपना स्क्रॉल चाहिए — nav पहले से flex-1 overflow-y-auto है, इसलिए log-out रो को नीचे से धकेले बिना स्क्रॉल करता है।
क्योंकि onClick वाले div तक कीबोर्ड से नहीं पहुँचा जा सकता, इसलिए फोन-साइज़ व्यूपोर्ट पर ड्रॉअर खुलकर बिना माउस बंद न हो पाता। बैकड्रॉप असली बटन है aria-label Close menu के साथ, और Escape भी ड्रॉअर बंद करता है। टॉगल खुद aria-expanded और sidebar id पर aria-controls रखता है, ताकि स्टेट आइकन स्वैप से अनुमानित नहीं, एक्सपोज़्ड हो।
-translate-x-full से स्लाइड करने पर वह स्क्रीन से हटता है लेकिन हर लिंक टैब क्रम में रहता है, इसलिए मोबाइल पर कीबोर्ड यूज़र पेज तक पहुँचने से पहले छह अदृश्य डेस्टिनेशन टैब करता है। max-md:invisible md ब्रेकपॉइंट के नीचे उसे टैब क्रम से निकालता है और स्लाइड रखता है, क्योंकि visibility बाहर जाते समय एनिमेशन के अंत में और अंदर आते समय तुरंत ट्रांज़िशन होती है। md से ऊपर ड्रॉअर हमेशा visible है, इसलिए क्लास लागू नहीं होती।