https://neobrutalism.com/tr/blocks/sidebar/collapsible-dashboard-sidebar
Daraltılabilir Kenar Çubuğu
Kenar Çubuğu · Pro kaynağı
Aynı anda üç iş yapan bir uygulama kenar çubuğu: masaüstünde tam 256px panel, daraltınca 64px simge rayı ve loş arka planlı mobilde tuval dışı bir çekmece. Bir marka satırı, rol rozetli bir profil bloğu, okunmamış sayımlı altı gezinme girişi ve alta sabitlenmiş bir çıkış eylemi taşır. Daraltmak etiketleri görsel olarak gizler ama ekran okuyucular için tutar, böylece ray isimsiz simgeler satırına dönüşmez. Her renk bir tema belirtecidir, bu yüzden açık ve koyuda paletinizi değişiklik olmadan izler.
Kenar Çubuğu
Daraltılabilir Kenar ÇubuğuCanlı önizlemeyi aç
- Hero, fiyatlandırma ve auth
- Her duraklama noktasını önizle
- Kaynağı kopyala
- MCP kuruluma hazır
- Radix · Base UI · React Aria
- 158 hazır bloklar
- Gönderilen sayfa bölümleri
- Gösterge panelleri ve pazarlama
- Pro şifreyi açar
- Açılır düzenler
Sevilen bir topluluk:
geliştiriciler, tasarımcılar ve üreticiler
Bir UI kitine denk geldim ve hemen aldım. Yeni, aktif sürdürülüyor ve sürekli gelişiyor — harika bir iş! 🤘
Ziv Reich, Yazılım Geliştirici Sadece şunu söylemek istedim: neobrutalism.com harika olmuş. Gerçekten çok beğendim. Tasarımda berbatım, bu yüzden bu benim için müthiş oldu. Kişisel sitemde kullandım.
Paul Bratslavsky, Coding With Paul'ün yaratıcısı Sonunda kişisel web sitemi Neobrutalism.com ile yeniden yaptım — eğlenceli kütüphane, başlamak çok kolay!
Cameron Blackwood, İçerik Üreticisi Neobrutalism.com, retro tarzındaki en sevdiğim UI bileşen kütüphanelerinden biri — gerçekten ship edilebilen bileşenler.
Zhengyang Hou, Indie Hacker web için en sevdiğim ui kütüphanelerinden biri. harika iş — umarım çok daha ileri gider.
Taseen Tanvir, Kurucu ve Tasarımcı Neobrutalism.com Pro'yu denedim — her şeye benzemeyen bir UI kiti. Neobrütalist bloklar 🔥 tuhaf düzenleri prototiplemeyi çok hızlandırdı.
Nitesh Padghan, Ghostwriter Mükemmel denge ve akışa sahip harika bir landing page tasarımı. Renk paleti animasyonlarla birleşince olağanüstü bir kullanıcı deneyimi yaratıyor.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Sundukları tasarımdan gerçekten etkilendim. Nihai ürün tam olarak hayal ettiğimle örtüştü.
Desmond, Kurucu ortak @ VectorlabsVentures Bir ajans sahibi olarak müşteriler için landing page düzenlerini genelde haftalarca cilalarım. Neobrutalism.com ile bir şablon takıyorum, metni ayarlıyorum ve ship etmeye hazırım.
Duke Opoku Amankwah, Kurucu @ Midas Şablonlar yalnızca görsel olarak çarpıcı değil; aynı zamanda inanılmaz iyi yapılandırılmış. Bize haftalarca geliştirme süresi kazandırdı.
Abiola Braimah, Geliştirici @ Studio IX Üstün kalite ve detaylara özen. Responsive tasarım tüm cihazlarda sorunsuz çalışıyor.
Acromond X., Kurucu ortak @ VectorlabsVentures Bu şablonları iş akışımıza entegre etmek geliştirme döngümüzü ciddi şekilde kısalttı. Mükemmel iş.
Raquib S., Backend geliştirici Bu şablonlar başvurduğumuz ana kaynağımız oldu. Kod temiz, iyi belgelenmiş ve kolayca özelleştirilebilir.
Hallic M., Geliştirici @ AtlasLabs Neobrutalism.com şablonları estetik ile işlevsellik arasında mükemmel dengeyi kuruyor. Projelerimiz için gerçek bir dönüm noktası.
Ibrahim S., Frontend Lead @ ScaleUp Üstün destek ve premium kalitede şablonlar. Bu şablonların ROI’si fenomenal.
Kevin K., CEO @ WebCraft Neobrutalism.com şablonları yeni müşteri projelerine yaklaşımımızı tamamen değiştirdi. Kod kalitesi olağanüstü, tasarımlar gerçekten dünya standartlarında.
Danny G., DevStack kurucusu Birçok şablon kütüphanesi kullandım ama Neobrutalism.com performans optimizasyonu ve temiz kod mimarisine verdiği önemle öne çıkıyor.
Ian D., Wavelength CTO’su Bu şablonlardaki animasyonlar ve mikro etkileşimler gerçekten büyüleyici. Tasarım ekibimiz için en iyi yatırım.
Ben S., PixelPerfect Lead Designer Teknik olmayan bir kurucu olarak Neobrutalism.com şablonları, tasarım kalitesinden ödün vermeden MVP’mizi rekor sürede çıkarmamıza yardımcı oldu. Yatırımcılarımız çok etkilendi.
Matthew I., Startup kurucusu Bu bileşenlerin ne kadar modüler ve iyi belgelenmiş olduğunu takdir ediyorum. Farklı şablonlardan parçaları sorunsuzca birleştirebildik.
Garrett P., TechFusion Frontend Lead Neobrutalism.com şablonlarının ROI’si inanılmaz. Geliştirme süremizi ciddi şekilde kısaltırken müşterilere daha yüksek kaliteli siteler teslim ediyoruz.
Xavier C., Ajans sahibi
Sıkça sorulan
sorular
Bu Daraltılabilir Kenar Çubuğu bloğunun nasıl bir araya getirildiği, ne değiştirebileceğiniz ve burada diğer düzenler yerine ne zaman kullanması gerektiği.
Bir uygulama için. Oturum açmış bir kullanıcı, geçerli bir rota ve sayfa içeriğinizin etrafında kalıcı bir kabuk varsayar — bu yüzden logo ve kayıt ol düğmesi yerine bir profil bloğu ve çıkış eylemi vardır. Herkese açık bir site için navbar kategorisini kullanın: üst gezinme blokları yataydır, hesap durumu yoktur ve kabuk yerine bir üst bilgi için inşa edilmiştir. Tek kenar çubuğu bloğu budur, karşılaştırılacak daha dar veya daha geniş bir varyant yoktur.
w-64'ten w-16'ya iner ve her metin etiketi kaldırılmak yerine sr-only olur, böylece simgelerin hâlâ erişilebilir adları vardır ve her satır hover araç ipucu için bir title özelliği tutar. Profil avatarı tutar, isim ve rolü görsel olarak gizli bir satırın arkasına saklar. Notifications üzerindeki okunmamış rozeti, 64px raya sıkışmış sayısal bir rozet okunur olmaktan çıktığı için gizli bir 3 unread ifadesiyle değiştirilir.
Dosyanın en üstündeki activeHref sabitini değiştirin veya bir Next.js uygulamasında const activeHref = usePathname() ile değiştirin. Eşleşen satır sarı dolgunun yanı sıra aria-current=page alır, böylece durum yalnızca gösterilmez, duyurulur — yalnızca renk bir ekran okuyucuya ve onu ayırt edemeyen herkese görünmez kalırdı. Satır ayrıca görünür bir kenarlık kazanır; bu ikinci, renksiz bir ipucudur.
Her şey navItems dizisinden gelir: her kayıt bir id, bir etiket, bir lucide simge bileşeni, bir href ve isteğe bağlı bir count'tur. Diziyi yeniden sıralamak kenar çubuğunu yeniden sıralar; herhangi bir kayda count eklemek o satırda rozeti render eder. Listenin kendi kaydırmasına ihtiyaç duymadan önce pratik sınır yaklaşık sekiz giriştir — gezinme zaten overflow-y-auto ile flex-1'tir, bu yüzden çıkış satırını alttan itmek yerine kayar.
Çünkü onClick işleyicili bir div klavyeyle ulaşılamaz, böylece telefon boyutunda bir görünüm alanında çekmece fare olmadan açılıp bir daha kapanamayabilirdi. Arka plan, aria-label Close menu taşıyan gerçek bir düğmedir ve Escape da çekmeceyi kapatır. Geçişin kendisi sidebar id'sine işaret eden aria-expanded ve aria-controls taşır, böylece durumu simge değişiminin ima etmesi yerine açığa vurulur.
-translate-x-full ile dışarı kaydırmak ekrandan çıkarır ama her bağlantıyı sekme sırasında bırakır, böylece mobilde bir klavye kullanıcısı sayfaya ulaşmadan önce altı görünmez hedeften geçer. max-md:invisible eklemek, md altındaki sekme sırasından çıkarırken kaydırmayı tutar; çünkü visibility çıkışta animasyonun sonunda, girişte hemen geçiş yapar. md'nin üzerinde çekmece her zaman görünürdür, bu yüzden sınıf hiç uygulanmaz.